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

Question

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 bottom 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

score 2 · Answer 1 · answered Mar 16 '11 at 17:52

2

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

answered Mar 16 '11 at 17:52

Ludovico Fischer

1,602
11
11

score 0 · Answer 2 · answered Mar 16 '11 at 17:40

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.

score 0 · Answer 3 · edited May 23 '17 at 10:33

0

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.

edited May 23 '17 at 10:33

Community

1
1

answered Mar 16 '11 at 17:43

Nathan Ostgard

8,258
2
27
19

score 0 · Accepted Answer · answered Mar 16 '11 at 20:14

0

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.

answered Mar 16 '11 at 20:14

Evanss

23,390
94
282
505

You should accept your own answer if you fixed it yourself, to mark the question as answered. – Nathan Ostgard Mar 16 '11 at 22:33
I cant except it for 8 more hours. Thanks – Evanss Mar 18 '11 at 08:44

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

4 Answers4