Div wont extend to bottom of its contents when divs inside it are floated left

I have 2 divs as columns, both are floated left and set to clear none. Their container div has a background image at the top, so the background is at the top of both columns.

I want to be able to also have a background image at the bottom of the columns. Ive created another div which sits inside the container div (but outside the columns) and set a background image to its bottom.

The problem is that this div doesn't extend to the bot开发者_运维百科tom of the columns it contains. How can I make it do this? Ive tried playing around with floats and clearing but without any luck.

Thanks

In addition to the techniques the others already mentioned, you can add overflow:hidden to the parent container's style.

This is a very well known CSS quirk: here is a complete treatment: http://www.quirksmode.org/css/clearing.html

CSS:

div#test {
    min-height:100%;
    background-image: url('http://www.google.nl/images/logos/ps_logo2.png');
    background-repeat: no-repeat;
    background-position: bottom;
}

div#wrapper {
    height: 500px;
}

HTML:

<div id="wrapper">
    <div id="test">Blalalalalala</div>
</div>

This way you're div (#test) will have the height of his parent (#wrapper). http://jsfiddle.net/F95xN/6/ Try removing the min-height: 100%; and you'll see.

Float elements do not count towards the height of a non-float elements. You can make the container div expand to include these floats in a couple ways:

• Add float: left to the container div, too.
• Or, add something like <div style="clear: both;"></div> to the end of the container div.
• Or, use a more flexible clearfix technique.

Oops, I hadn't noticed but id set the height of one of the containers when I was wire-framing and forgotten it was there. Removing the height and floating the right div fixed this for me.

Thanks anyway.