How can I let a <div> resize to fit the contained <div>s

Hey, I got this HTML:

<div class="layer">
<div class="post">Lorem ipsum...</div>
<div class="info">Lorem...</div>
</div>

And this CSS:

div.layer{
height: auto;
background-color: #FFF;
}

div.post{
width: 70%;
float: left;
background-color: #FFF;
}

div.info{
width: 20%;
float: right;
background-color: #FFF;
}

Now what I wanted was that, if div.post was larger than div.info, div.layer would resize along.

But it doesn't do so, meaning that there's a hole below div.info. Any suggestion to fix that?

Thanks in advance.

.layer {display: table;}
.post {display: table-cell;}
.info {display: table-cell;}Internet Explorer doesn’t support the above declarations.

The problem you are describing either requires Javascript (http://www.paulbellows.com/getsmart/balance_columns/) or Faux Columns (http://alistapart.com/articles/fauxcolumns/). :)

Edit: You will also need to clear the floats.

.layer {display: table;}
.post {display: table-cell;}
.info {display: table-cell;}Internet Explorer doesn’t support the above declarations.

It did work, except that the bottom two lines in the info div were moved a bit to the right.

I'd also rather have IE supports it, but if it doesn't: too bad :P

The problem you are describing either requires Javascript (http://www.paulbellows.com/getsmart/balance_columns/) or Faux Columns (http://alistapart.com/articles/fauxcolumns/). :)

Edit: You will also need to clear the floats.

If you meant using clear: left; and clear: right; then it doesn't work.

Also, the Faux Columns would not help as div.layer is not as large as the largest contained column, but has a height of 0...