Background of container doesn't fit the floating sidebar

Discussion in 'CSS' started by Kadence, Dec 9, 2009.

  1. #1
    On this page you can see that the white colored background does not fit the sidebar. The CSS is pretty complicated with multiple style sheets, but basically the sidebars (#primary and #secondary) are float:left, with the #content div after them. The sidebars and content are located inside the #wrapper div.

    I've set background-color: #FFFFFF inside the #wrapper CSS, but for some reason this background color is not taking effect.

    What would be the way to get the white background to extend all the way to the footer? Why is the background color for the #wrapper div not doing anything?
     
    Kadence, Dec 9, 2009 IP
  2. jwitt98

    jwitt98 Peon

    Messages:
    145
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #2
    This is a common problem with floated elements. When you float something, you take it out of the normal flow of the page and the containing div will collapse if there is nothing else to hold the height.
    The solution is to the add a cleared element after the floated element, for example,
    you could add:
    <br style="clear:both;" />
    directly after the floated sidebar div.
     
    jwitt98, Dec 9, 2009 IP
  3. Kadence

    Kadence Well-Known Member

    Messages:
    139
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    108
    #3
    Thanks, that worked :)
     
    Kadence, Dec 9, 2009 IP