How to position divs correctly in a for loop in PHP and CSS

Question

I have an issue I have been trying to solve. I have created a "blog" you can call it, and I have the option to make a new post. When I make a new post, a div is added. However, when the div gets added, the previous post is shifted to the right. I have tried all sorts of suggestions, but I can't get it. Here is an image:

What I want is so that the divs are lined up properly. Here is my code:

 body { background-color: #558C89; /*background-color: #1FDA9A;*/ color: #000305; /*remove if background is not working */ font-size: 87.5%; /*base font size is 14px */ font-family: Arial, 'Lucida Sans Unicode'; line-height: 1.5; text-align: left; margin-left: 21.5%; } a { text-decoration: none; } a:link, a:visited { } a:hover, a:active { } .body { } form { display: inline; } #logo { position: absolute; z-index: 1; left: 0; top: 5px; height: 50px; vertical-align: top; } .mainheader img { width: 100%; height: auto; margin: 0% 0%; } .mainheader nav { background-color: #424242; /*background-color: #008BBA; /* Here for color of navigated buttons*/ height: 65px; width: 100%; position: absolute; top: 0; left: 0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-style: solid; border-color: black; border-width: 1px; } .mainheader nav ul { list-style: none; margin: 0 auto; } .mainheader nav ul li { float: right; display: inline; margin-top: 0px; } .mainheader nav a:link, .mainheader nav a:visited { color: #FFF; font-weight: bold; display: inline-block; padding: 18px 25px; height: 10px; /* Come back here to continue to edit buttons */ } .mainheader nav a:hover, .mainheader nav a:active, .mainheader nav .active a:link, .mainheader nav .active a:visited { background-color: #638CA6; opacity: 0.85; height: 63px; text-shadow: none; } .mainheader nav ul li a { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .newsClass{ position: absolute; width: 1000px; background-color: #404040; border-style: solid; border-color: black; border-width: 1px; text-align: center; color: #FFF; margin: -100px 0 0 -150px; top: 25%; left: 27%; z-index: 2; } .topcontent { background-color: #404040; width: 850px; position: absolute; text-align: center; color: #FFF; margin-top: 120px; border-style: solid; border-color: black; border-width: 1px; line-height: 1; display: inline-block; left: 21.5%; } #box{ border: 1px solid rgb(200, 200, 200); box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px; background: rgba(200, 200, 200, 0.1); border-radius: 4px; top:50px; } h2{ text-align:center; color:#fff; } #footer { color: #FFF; }

 <?php error_reporting(E_ALL & ~E_NOTICE); session_start(); include("blog.php"); $posts = (isset($_GET['id'])) ? get_posts($_GET['id']) : get_posts(); $username = $_SESSION['username']; ?> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Home</title> <!-- CSS --> <link href="accountCSS/myaccountStyle.css" type="text/css" rel="stylesheet"> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500"> <link rel="stylesheet" href="indexCSS/bootstrap.min.css"> <link rel="stylesheet" href="indexCSS/font-awesome.min.css"> <link rel="stylesheet" href="indexCSS/form-elements.css"> <link rel="stylesheet" href="indexCSS/style.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <!-- Favicon and touch icons --> <link rel="icon" href="images/favicon.gif"> </head> <body> <a href="www.cookeh.org"><img src="images/logo.gif" id="logo"/></a> <header class="mainheader"> <nav><ul> <?php if(isset($_SESSION['user_id'])){ echo '<li><a href="logout">Log out</a></li>'; }else{ echo '<li><a href="login">Log in</a></li>'; } ?> <li><a href="myaccount">My Account</a></li> <li><a href="contact">Contact</a></li> <li><a href="#">Play</a></li> <li><a href="index">Home</a></li> </ul></nav> </header> <h2 class="newsClass"> Recent News <?php if(getPermissions($username)) {echo '<a href="add_post.php", style="color:green">New Post</a>'; }?> </h2> <?php foreach($posts as $post) { ?> <!-- Top content --> <div class="top-content"> <div class="inner-bg"> <div class="container"> <div class="row"> <div class="col-sm-6 col-sm-offset-3 form-box"> <div class="form-top"> <div class="form-top-left"> <h2 class ="title"><a href="index.php?id=<?php echo $post['post_id'];?>" style="color:white"><?php echo $post['title'];?></a></h2> <p> Posted on <?php echo date('dmY h:i:s', strtotime($post['date_posted'])); ?> in <a href="category.php?id=<?php echo $post['category_id']; ?>", style="color:green"><?php echo $post['name']; ?></a> <br></br> <?php if(getPermissions($username)) { ?> <a href="edit_post.php?id=<?php echo $post['post_id']; ?>", style="color:green">Edit Post |</a> <a href="delete_post.php?id=<?php echo $post['post_id']; ?>", style="color:green"> Delete Post</a> <?php } ?> </p> <div class="contents"> <?php echo nl2br($post['contents']); ?></div> <?php } ?> </div> <div class="form-top-right"> </div> </div> </div> </div> </div> </div> </div> <!-- Javascript --> <script src="assets/js/jquery-1.11.1.min.js"></script> <script src="assets/bootstrap/js/bootstrap.min.js"></script> <script src="assets/js/jquery.backstretch.min.js"></script> <script src="assets/js/scripts.js"></script> <!--[if lt IE 10]> <script src="assets/js/placeholder.js"></script> <![endif]--> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-88077370-1', 'auto'); ga('send', 'pageview'); </script> </body> </html>

NOTE: I guess the "run snipped" doesn't seem to run php.

Answer 1

It sounds like you are not closing the divs in the correct places.

Make sure your indentation is correct and ensure that every <div> you open inside the foreach is also closed before the foreach is closed.

I like to use foreach(): endforeach; when you have a lot of markup inside a loop like this, as it makes reading the code a lot easier.

<?php foreach ($posts as $post):?>
<div>
    <h2 class ="title">
       <a href="index.php?id=<?php echo $post['post_id'];?>" style="color:white"><?php echo $post['title'];?></a>
    </h2>
    <p> 
        Posted on 
        <?php echo date('d-m-Y h:i:s', strtotime($post['date_posted'])); ?>
        in 
        <a href="category.php?id=<?php echo $post['category_id']; ?>", style="color:green">
            <?php echo $post['name']; ?>
        </a>
        <br></br>
        <?php if(getPermissions($username)): ?>

            <a href="edit_post.php?id=<?php echo $post['post_id']; ?>", style="color:green">Edit Post |</a>

            <a href="delete_post.php?id=<?php echo $post['post_id']; ?>", style="color:green"> Delete Post</a>

        <?php endif; ?>
    </p>
    <div class="contents"> 
      <?php echo nl2br($post['contents']); ?></div>
    <div>

</div>
<?php endforeach;?>

Adding a wrapping div to each post will provide a box around the markup inside. Divs have display:block be default. It is better practice than using <br /> or <p>&nsbp;</p> as it will give you more control when/if you need to style that element.

How to position divs correctly in a for loop in PHP and CSS

Question

1 answers

solution1
1 ACCPTED 2017-03-08 22:04:19

How to position divs correctly in a for loop in PHP and CSS

Question

1 answers

solution1 1 ACCPTED 2017-03-08 22:04:19

solution1
1 ACCPTED 2017-03-08 22:04:19