Floating divs css issue - css

Question

I'm working on a small PHP script, I made 2 divs and I used the float to show the two divs in the same line. But I still have a problem with background because the two divs do not have the same height.
This is the css code:
.wrapper{
width:200px;
}
.content{
width:200px;
}
.right{
float:right;
width:100px;
background:yellow;
}
.left{
float:right;
width:100px;
background:red;
}
.clear{
clear:both;
}
And this is the html code:
<div class="wrapper">
<div class="content">
<div class="right">
sdiousoiudosud sdiousoiudosud sdiousoiudosud sdiousoiudosud
</div>
<div class="left">
iuoiu
</div>
<div class="clear">
</div>
</div>
</div>

Answer 1

You should use display: table-cell:
.left, .right{
display: table-cell;
width: 100px;
}
.right{
background:yellow;
}
.left{
background:red;
}
Demo
If you want you can also use display: table-row and display:table, and set all widths. But it isn't necessary. Demo

Answer 2

The "good way" is using display: table-cell, as I explained in my other answer.
But if you want to support old browsers like IE7, you can use the following trick:
.content{
overflow: hidden;
}
.left, .right{
float: left;
width: 100px;
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.right{
background:yellow;
}
.left{
background:red;
}
Where 10000px can be any value greater than the height of the highest element.
Demo