Floated divs with width 50 percent problem in Internet Explorer
Floated divs with width 50 percent problem in Internet Explorer is just one of the many, many joys Internet Explorer brings us. Even though some of those IE bugs seem totally absurd, some are quite logical, like this one:
If we have a div with a width of 501px or any other odd number, and inside it two floated divs with widths of 50%, Firefox will render it just fine, giving to each of those floats what appears to be 50% width. But it’s not. One of those floats is 1 pixel wider.
CSS Code: .container{
width:500px;
background-color:#FF0000
}
.float_1 {
float:left;
width:50%;
background-color:#00FFFF;
}
.float_2 {
float:left;
width:50%;
background-color:#99FF00;
font:"Courier New", Courier, monospace
}
HTML Code: <div class="container"> <div class="float_1">Floating div 1, width = 50%</div> <div class="float_2">Floating div 2, width = 50%</div> </div>
When we look at the same page in Internet Explorer, the second float div is underneath the first. That is because 501/2 = 250.5, and since we’re dealing with whole numbers here, 250.5 rounded gives us 251 pixels width for each floated div. 251 + 251 equals 502, and since the container is 501px wide, it can’t fit in the same row.
Live HTML/CSS preview (View with Internet Explorer to see the problem):
501px wide container
500px wide container
This seems logical to me, but impractial and time wasting like all other IE issues.
Powered by ScribeFire.
