CSS non-stretching box

Question

Hello all. I have a question about my layout. I have a setup something like this:

<div id="container">
   <div id="body">
      <div id="item">
      </div>
      <div id="item">
      </div>
   </div>
</div>

And I want the body box to stretch with the amount of items I put in it but it doesn't. anyone know how to fix this with css.

Answer 1

First off, you should use a class for your item div's as id's should be unique on the page. Second, this is probably being caused by your item div's being floated. If you add a clearing element below them, it should fix it:

<div id="container">
    <div id="body">
        <div class="item"></div>
        <div class="item"></div>
        <div style="clear: both"></div>
    </div>
</div>

Answer 2

Have your item divs float left (display: inline might work too, haven't tried it), and set the display of your body div to display:inline-block;. That should shrink to fit its contents.

Quick and dirty:

<div id="container">
    <div id="body" style="display:inline-block; overflow: auto;">
        <div class="item" style="float: left;">
            Hi
        </div>
        <div class="item" style="float: left">
            There
        </div>
    </div>
</div>

Edit: Fixed, thanks to Matt Sach.

Answer 3

If your items are floated, you could add a block with clear: both; parameter set, as Pat mentioned already.

If you don't want one more element in your code, you could apply overflow: hidden; to your body:

<div id="container">
    <div id="body" style="overflow: hidden;">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

Be carefull though, as everything that sticks outside the body box will be cut.

Answer 4

I would personally discourage the use of inline-block, Internet Explorer support for it is poor in older versions.

IE 6-8 (8 compatibility mode only) have issues with it.