Making wrapper div extend to same height as content divs

Question

I have a wrapper div with a min-height set. Position is relative and display is block. I have two column divs floated left and set to inherit min-height.

When I have lengthy content the background color of #wrapper never extends to match the content in the column divs.

Page is here: http://youngimaginations.dreamhosters.com/index.php

CSS is here: http://youngimaginations.dreamhosters.com/yi.css

Can someone point out the error of my ways?

score 25 · Accepted Answer · answered Feb 23 '10 at 19:27

25

overflow: auto will do the trick

or a <div style='clear: both'> after the floated elements.

answered Feb 23 '10 at 19:27

Pekka

442,112
142
972
1,088

score 9 · Answer 2 · answered Feb 23 '10 at 19:29

9

The proper fix is called "clearfix".

Read about it here, you'll never look back.

answered Feb 23 '10 at 19:29

pixeline

17,669
12
84
109

yes, it will, see this thread: http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best. – pixeline Feb 23 '10 at 19:37
best solution that works in all modern browsers! Thanks a lot! – Hank Dec 30 '14 at 17:05

Making wrapper div extend to same height as content divs

2 Answers2