9

I have nested divs, with most being float:left; display:block;, like do:

<div class="container" style="display:block;">
    <div style="float:left; display:block; height:100px;">
    <div style="float:left; display:block; height:100px;">
</div>

I want the div container to get bigger without setting a height. At the moment it's a flat line.
How do I set up the inner divs, so that the container has a height?

TL;DR: Currently I can see the 2 inside div's fine, but the container is a flat div (no height).
How do I give it a height?

Eitan T
  • 32,660
  • 14
  • 72
  • 109
Emmett
  • 357
  • 2
  • 4
  • 15

2 Answers2

12

You have two options:

<div class="container" style="overflow:hidden">
    <div style="float:left; height:100px;">
    <div style="float:left; height:100px;">
</div>

or

<div class="container">
    <div style="float:left; height:100px;">
    <div style="float:left; height:100px;">
    <div style="clear:left">
</div>

Note that overflow:hidden elements will wrap around floating inner elements. Alternatively, you can use an element to clear the float, which will also make the surrounding element to wrap it's content.

Another tip: You don't have to state that divs are display:block. In HTML, there are basically 2 types of elements, block and inline. Divs are block by default.

Andre Pena
  • 56,650
  • 48
  • 196
  • 243
3

Add overflow:hidden to that DIV.

casraf
  • 21,085
  • 9
  • 56
  • 91
  • duplicate of http://stackoverflow.com/questions/804926/make-outer-div-be-automaticly-the-same-height-as-its-floating-content – Paul Sullivan Jun 30 '12 at 19:54
  • You can also float the container left or add a cleared element at the end (though I recommend using a clearfix solution) – Paul Sullivan Jun 30 '12 at 19:54
  • Overflow: hidden can cause issues when you don't want the overflow to be hidden. (if you have a flyout for example). Clearfix is a good way to go as well. – Scott Simpson Jun 30 '12 at 19:58
  • Usually with floats you can't actually overflow, since you want it to fit, unless you add `max-height` or something, in which case, `overflow:auto` does the trick – casraf Jun 30 '12 at 20:01