CSS idiots

Fixed width layouts:

Most of the web site layouts have their width defined in pixels, this type of layouts are called as Fixed width layouts. I bet many designers & developers love these layouts as they don’t have to worry about screen resolution or text size changes. It’s an advantage from designers & developers point of view but at the same time it’s disadvantage of Fixed width layouts.

Liquid layouts:

Layouts with percentage (%) widths are called Liquid layouts. Liquid layouts scale in relation to the browser window. But if you have a layout with multiple columns & browser window has been scaled to smaller, it gets really difficult to read. In this case it’s better to use min-width to prevent the layout to get smaller than mentioned width. On the other side in large browser widths line length can get wider & difficult to read. Leave some space on left & right side of layout, use margin & padding in such a way that it will look good even in wider browser window.

Elastic layouts:

In elastic layouts dimensions of elements are relative to font-size instead of browser width. So whenever text size is increased layout get scaled. But sometimes elastic layouts can become too wider & horizontal scroll will appear, setting max-width to 100% will resolve this issue except IE6 & below; as IE6 & below doesn’t support max-width property.

Most of the browser’s default font-size is 16px, according to this 10px will be 62.5%.

body{
font-size:62.5%;
}

Now you know that 1em=10px so it’s really easy to calculate widths in em.

780px=78em;
12px=1.2em;