I have this webpage where I am getting the dreaded float drop bug in
IE. I tried everything in the float drop FAQs online, but nothing can
get it working. I have narrowed down the problem though. For some
reason the left menu is 195px in IE instead of the 175 specified,
meaning that box divs are wider than the div they are contained in so
the right one drops. However, I can't figure out how to make the left
div equal to only 175px in IE. Any help would be greatly appreciated!
The code looks like this (with #contentleft and #contentright both
inside #frame):
#frame {
width:675px;
height:425px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
padding:0px;
text-align:left;
}
#contentleft {
text-align: center;
height: 100%;
width:175px;
padding:0px;
float:left;
background:#fff;
border-color: #999999;
border-style: solid;
border-bottom-width: 10px;
border-top-width: 0px;
border-right-width: 0px;
border-left-width: 0px;
}
#contentright {
width:500px;
padding:0px;
float:left;
background:#eee;
height:100%;
border-color: #999999;
border-style: solid;
border-bottom-width: 10px;
border-top-width: 0px;
border-right-width: 0px;
border-left-width: 0px;
}