0

I am building a small html web page. In my web page I've got a div, inside it I've got a floating div. I'd like to get the height of my wrapper div to be similar to that of my floating div. How can this be done in css \ html?

Thank you

vondip
  • 13,809
  • 27
  • 100
  • 156

2 Answers2

2

From your question, I'm guessing the problem is that your containing div looks like this:

http://jsfiddle.net/RkHa4/ - it's not extending to the height of the floated div.

The solution is to "clear your floats".

An easy way to do this is to apply overflow: hidden to your containing div, like this:

http://jsfiddle.net/RkHa4/1/

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • thank you very much. I am not completely sure what overflow has to do with this though. – vondip Jun 03 '11 at 05:21
  • 1
    See [1](http://stackoverflow.com/questions/4910075/why-overflow-hidden-clears-a-float) and then [2](http://stackoverflow.com/questions/6196725/how-does-the-css-block-formatting-context-work/6199172#6199172). – thirtydot Jun 03 '11 at 08:25
2

Thirtydot is correct, you should clear your floats, but I would recommend you use the clearfix method instead. Using overflow:hidden will cause unintended problems with CSS properties that extend past the boundaries of a container.

CSS overflow issue

Community
  • 1
  • 1
Brent Friar
  • 10,588
  • 2
  • 20
  • 31
  • I tend to use `overflow: hidden` in the vast majority of cases, and only fall back to using `clearfix` when I must. A (minor) downside to `clearfix` is that you must stick a less than semantic `class="clearfix"` all over your HTML. Relevant: http://stackoverflow.com/questions/5565668/in-2011-is-there-any-need-for-clearfix – thirtydot Jun 03 '11 at 00:05
  • Don't get me wrong, I used `overflow: hidden` as well. Check out http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/. As CSS3 becomes more common, clearfix will not cause the issues overflow does. Simply makes it more future compatible. – Brent Friar Jun 03 '11 at 00:32