As all of you knows that there are boom of responsive website and everyone looking to restructure their old website to be responsive and compatible to mobile, tablet as well as to desktop devices. I found such a nice lightweight library – intention.js. For Responsive Design, you might like to add intention.js to your collection.
intention.js – offers a light-weight and clear way to dynamically restructure HTML in a responsive manner. With intention.js you can easily increase layout options and flexibility, reduce development time and lessen dependence on media-query-driven stylesheet overrides.
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:
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.
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]>