Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: clear:both fix?

  1. #1
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,046
    Thanks
    19
    Thanked 42 Times in 42 Posts

    clear:both fix?

    I'm pulling some information out of my database, aligning text next to images using floats, all is well apart from the fact the parent div doesn't extend with the content, I have added a span to clear both at the end of each result.

    Here is some of the code:

    Code:
    <div id="wrapper"><br/><br/>
    <div class="logo" ><img src="village_belle_logo.png" alt="The Village Belle St. Kilda" class="logo1" /> </div>
    <div class="header">
    <br/><br/><br/>
    <div class="nav_bar"> <nav class="links">  <a href="index.html">Home</a>&nbsp;&nbsp;&nbsp; 	 <a href="history.html">History</a>&nbsp;&nbsp;&nbsp; 	 <a href="food.html">Food</a>&nbsp;&nbsp;&nbsp;	 <a href="drinks.html">Drink</a>&nbsp;&nbsp;&nbsp;	 <a href="doulton.html">Doulton Bar</a>&nbsp;&nbsp;&nbsp;	 <a href="whatson.html">What&apos;s on</a>&nbsp;&nbsp;&nbsp; <br/>	 <a href="functions.php">Function</a>&nbsp;&nbsp;&nbsp;	<a href="sport.html">Sport</a>&nbsp;&nbsp;&nbsp;	 <a href="bottleshop.html">Bottle Shop</a>&nbsp;&nbsp;&nbsp; 	 <a href="hob.html">Hours of Business</a>&nbsp;&nbsp;&nbsp; 	 <a href="contact.html">Contact Us</a> </nav></div>
    <br /><br />
    </div>
    <?php
    while($row = mysql_fetch_array($query)){
    //$content = wordwrap($row['content'], 20, "<br />\n");
    echo "<span class=\"event\"><h2 class=\"day\">" . $row['description'] . " - " .  $row['title'] . "</h2><br /><br />" .  $row['content'] . " </span><img class=\"eventimg\" src =\" " .$row['img'] . "\" alt=\"" . $row['alt'] . "\" /><br /><br /> <span class=\"clear\"></span>";
    }
    ?>
    
    </div>
    here is a gyazo of what I am seeing.

    http://gyazo.com/e4947ec69ff535fdc830ad90661fc963

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,746
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there rafiki,

    add overflow:hidden; to your #wrapper attributes,
    or add this to your stylesheet...
    Code:
    
    #wrapper:after {
        content:'';
        display:block;
        clear:both;
     }
    
    ...if you prefer.

    Also note that you should be using CSS padding instead of those all too numerous "br" tags.

    coothead

  • #3
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,046
    Thanks
    19
    Thanked 42 Times in 42 Posts
    overflow:auto; actually solved the issue and I removed the br tags


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •