I have three divs inside of a bigger one. The first two are floated respectively left and right and the third is directly underneath them.
Problem is that after clearing both, Firefox throws the third div a mile-and-a-half below the two floaters. IE displays it just fine, without any excess margin.
Here's the code:
Anyone have an idea as to what's up?
Problem is that after clearing both, Firefox throws the third div a mile-and-a-half below the two floaters. IE displays it just fine, without any excess margin.
Here's the code:
HTML:
<div id="cont">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
Code:
#cont {
background-color: #fff;
margin-top: 10px;
margin-left: 10px;
width: 500px;
min-height: 125px;
}
#one {
width: 215px;
height: 106px;
float: left;
display: inline;
margin: 5px 0px 0px 15px;
border: 1px solid #ffd298;
}
#two {
width: 215px;
height: 106px;
float: right;
display: inline;
margin: 5px 15px 0px 0px;
border: 1px solid #ffd298;
}
#three {
clear: both;
margin: 10px auto 0px;
border: 1px solid #ffd298;
height: 59px;
width: 200px;
}
Anyone have an idea as to what's up?
Last edited: