Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Member
    Join Date
    Apr 2007
    Posts
    96
    Member #
    15165
    In this basic 2 column display, why does the wrapper div not "wrap around" the two divs inside it in Firefox 1.5.0.12 or Safari. In IE 7, it looks as I would expect it, the border on the wrapper div stretches down instead of just being a flat 2px line at the top.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>blah blah</title>
    <style>
    <!--
    .wrapper{
    width:640px;
    border:1px solid #BFC1B5;
    margin:0pt auto;
    }
    .leftcol{
    float:left;
    border:1px solid #BFC1B5;
    }
    .rightcol{
    float:right;
    border:1px solid #BFC1B5;
    }
    -->
    </style>
    </head>
    
    <body>
    
    
    <div class="wrapper">
        <div class="leftcol">
            <div>blah blah</div>
            <div>blah blah</div>
        </div>
        <div class="rightcol">
            <div>click me</div>
            <div>click me</div>
        </div>
    </div>
    
    </body>
    
    </html>

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Floats are outside the normal document flow. Since both of your divs are floated, the containing div essentially has no content for the purposes of height and width calculations. The best way to fix this is to add another div after both of them that has the [minicode]clear: both;[/minicode] directive applied to it. This will force it to appear below the two floats, and it will take up space because it will not itself be floated. The containing element will thus also be forced to enlarge to encompass the floats.

  4. #3
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Or the new way to fix it is by adding [minicode]overflow: hidden;[/minicode]

    Quiksmode's Clearing Floats
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Whoa. That totally kicks butt. Now I need to go and hunt down all the useless clearing divs and kill them


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:53 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com