user3027295 user3027295 - 13 days ago 6
CSS Question

Floating divs css issue

I'm working on a small PHP script, I made 2

div
s and I used the float to show the two
div
s in the same line. But I still have a problem with background because the two
div
s 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

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