SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    nested Div background problem

    I have a site with a main container div which holds three column divs inside.
    If I set the background color of the main container to white as the columns expand the container grows with them and the background follows. However in Firefox and Safari if one of the columns is shorter the container background does not follow, can any see what is going on from the code below:

    Code:
    #contentbox {min-height:90%; width: 950px; background: #fff; text-align: -moz-center;}
    
    #leftcol {float: left; width: 400px;}
    #rightcol {float: left; width: 330px; padding-top: 10px;}
    #midcol {float: left; width: 220px; }

    Code:
    <div id="contentbox">
    <!-- START LEFT COL  -->
    <div id="leftcol"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />test</div>
    <!-- END LEFT COL  -->
    <!-- START MID COL  -->
    <div id="midcol"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />test</div>
    <!-- END MID COL  -->
    <!-- START RIGHT COL  -->
    <div id="rightcol">
    <!-- #include file="includes/tabbed.asp" -->
    </div>
    <!-- END RIGHT COL  -->
    </div>
    in this exapmle i have made the leftcol the longest, midcol the smallest. In IE the contentbox expands to the longest div and makes a full white background behind all the columns, however in Safari and Firefox it doesn't..

    anyone know why

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This should fix it...

    Code:
    #contentbox {width: 950px; background: #fff; text-align: -moz-center; overflow: auto;}
    I've also removed the min-height as it wasn't doing anything in the code you provided unless you're providing a height on it's parent?

  3. #3
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    apple.com fixed it this way

    #id:after,
    .class:after
    { content: "&nbsp;"; display: block; height: 0; clear: both; visibility: hidden; }

    for any <div> you need to hold the height
    Last edited by tspr; Dec 6, 2007 at 21:29.


Bookmarks

Posting Permissions

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