CSS Box Model

Hi

How the CSS box model works has been explained by others many times already. If you already know how the different box models work and how to handle Internet Explorer, there is nothing new for you here. I’m just explaining these as one more reason that why I hate IE.

The CSS box model diagram
Here is a simple diagram showing how the dimensions of an element are related in CSS:
box-model

The W3C Box model
First a look at the the W3C box model, which is used by all standards compliant browsers and by Internet Explorer 6 and later if the circumstances are right. In the W3C CSS box model a block level element’s total width is calculated using the following formula:

total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

The IE Box model
The IE Box model is similar except for one important difference: paddings and borders are not included in the calculation:

total width = margin-left + width + margin-right

This means that if the element also has horizontal padding and/or borders, the actual content area will shrink to make room for them.

Solution:
1. Avoid situations that cause problems – You can simply avoid specifying both width and padding or border for the same element.

2. Insert extra markup – The outer element (div) controls the width, and the inner element (div) contains the border and padding.

3. Use conditional CSS – We can simply put condition like:

<!--[if lt IE 6]>
<style type="text/css">
#content {width:250px}
</style>
<![endif]-->
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s