Question

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

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.