I have the following html and css codes. I don't want to use box-sizing:border-box which is not supported in some browsers like IE(6-7), how may I solve my problem with css in order to still have the same orders of the divs? I want the gaps between the floated divs remain the same.
div[class="clmn"]{
border:solid .1em ;
background-color: rgba(255, 0, 0, 0.1);
width:33.13%;
padding:0.2em;
margin:.1%;
box-sizing:border-box;
}
div[id="div0"]{
background-color:rgba(0,0,255,0.1);
border:solid 1px red;
overflow:auto;
}
#div1{
float:left;
}
#div2{
float:right;
}
#div3{
float:right;
}
#div4, #div00{
width:100%;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="div00" class="clmn"> This is div 00</div>
<div id="div0">
<div id="div1" class="clmn"> This is div 1</div>
<div id="div2" class="clmn"> This is div 2</div>
<div id="div3" class="clmn"> This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3.This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3.This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3.This is div 3</div>
</div>
<div id="div4" class="clmn"> This is div 4</div>
</body>
</html>
I found the polyfill for box-sizing:border-box which can help you to solve your issue for IE 7 browser.
You can download the polyfill from the link below.
A CSS box-sizing: border-box polyfill for IE 6/7
You need to include it after this line box-sizing: border-box in your CSS code.
Your modified code:
Output with IE 7 document mode in IE 11 browser:
Note: The IE 7 browser was out of support a long time ago. It is not recommended to use IE 7 browser. I suggest you use the latest Microsoft browsers. If you are not available to upgrade to the latest Microsoft browser then at least move to IE 11 browser.