Align 2 divs side by side

Question

I need to align 2 divs side by side. They are both inside of a wrapper div that has no set height.

My problem is when I use float:left and float:right respectively, the div's don't appear to "stay inside" the wrapper div (I can tell as the wrapper div has a different background colour to the page and this isn't being extended to cover the 2 divs I want to position).

Basically I need the 2 div's to be side by side, but WITHIN this wrapper.

Apologies for the [very poor] attempt at describing this problem, I don't do much design work.

Answer 1

CSS

.table 
{
border: 2px solid #000;
display: table;
}
.row
{
display: table-row;
}
.cell{
display: table-cell;
border: 2px solid #ccc;
}
.leftcell{width: 200px;}
.rightcell{width: 100px; }

HTML

<div class="table">
<div class="row">
<div class="cell leftcell">left cell</div>
<div class="cell rightcell">right cell<br/>multiline</div>
</div>
</div>

It's the pretty way of getting that table feeling back from the '90's

Answer 2

Add overflow:hidden to the wrapper div.