« Back to Index

IE Box Model in other browsers

View original Gist on GitHub

Tags: #js

General-Example.md

/* force IE Box Model */
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.left{
    background-color: pink;
    border: 10px solid red;
    float: left;
    height: 150px;
    width: 30%;
}

.right{
    background-color: lightgreen;
    border: 10px solid blue;
    float: left;
    height: 150px;
    width: 70%;
}

<div class="left">content-box</div>
<div class="right">box-sizing</div>

dabblet.css

/**
 * IE Box Model in other browsers
 * All browsers have supported CSS3 box-sizing for a long time 
 * Except Firefox which only added support from version 7.0 so still a bit of time before we can use this.
 * Obviously IE still uses this box model so for once we don't need to worry about it :-)
 */

* { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; 
}
    
div {
    background: #ccc;
    border: 10px solid red;
    width: 400px;
}

dabblet.html

<!--
The W3C specified the width of a box to be it's content (not including padding or borders).
Which means if you have a box with a width of 400px and add a 10px border the box will resize to 420px width.

The "IE Box Model" dictates the width of the box would stay at 400px and it incorporates a 10px border.
This works great for percentage based floats for example when you need to add padding to the floated elements.
-->
<div>
	Some content
</div>