It is not compatible under ie6, please help analyze the reason_html/css_WEB-ITnose

<div class="main">    <div class="leftbar"></div>    <div class="middle"></div>    <div class="rightbar"></div> </div>

The general framework is like this. I set 960px for the main; the combined width of the three divs inside is exactly equal to 960px. Firefox, Chrom, IE9, etc. can display normally, but under IE6, the right div will be squeezed down. Why?

.main{    margin-top: 5px;    width:960px;    margin:5px auto;    padding:0px;}.main .leftbar{    width:235px;    float:left;    margin-left: 5px;    overflow: hidden;}.main .middle{    width:450px;    float:left;    margin-left:15px;    margin-right:15px;    background-color: #F2F2F2;    overflow: hidden;}.main .rightbar{    float:right;    width:230px;    margin-right:5px;    overflow: hidden;}

Reply to discussion (solution)

Because under IE, the border is calculated as width, and floating elements may be doubled. Its width cannot be set to 3 DIVs equal to 960

IE6 browser has a double margin value BUG for floating elements. The solution is to set the display:inline; style of these three floating elements:

.leftbar, .middle, .rightbar { display:inline; }