What can i use instead of css box-sizing?

Question

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>

IE 7 is so old it won't run on any operating system for which there are security updates. You should encourage people to upgrade systems running it instead of pandering to them. — Quentin, Mar 13 '20 at 11:09
Bottom line: if you absolutely have to support IE7, then you'll need to use the techniques that were in common use back at the time of IE7, because that's what works. In this case, that probably means adding extra layers of `
` elements to give you more fine grained control over the boxes. But frankly, box-sizing is going to be least of your problems. — Spudley, Mar 13 '20 at 11:17
Yes I want to. Because my friends are old. They like antiques. — Javad-M, Mar 13 '20 at 11:22
https://www.matrixgroup.net/snackoclock/2012/08/simple-box-sizing-border-box-fallback-for-ie/ — Lalji Tadhani, Mar 13 '20 at 11:26
https://stackoverflow.com/questions/2909667/box-sizing-support-in-ie7/10978314 — Lalji Tadhani, Mar 13 '20 at 11:26
Does this answer your question? [box-sizing support in IE7](https://stackoverflow.com/questions/2909667/box-sizing-support-in-ie7) — Rob, Mar 16 '20 at 01:56

score 0 · Answer 1 · answered Mar 16 '20 at 01:52

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.

box-sizing: border-box; *behavior: url(/scripts/boxsizing.htc);

Your modified code:

<!DOCTYPE html>
<html>
<head>
<style>
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;
*behavior: url(/boxsizing.htc); /*User need to modify the URL here...*/
}

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%;
}
</style>
</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>

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.

What can i use instead of css box-sizing?

1 Answers1