Full percentage values can break your layout

This tutorial explains how you can make columns fill the browser's window using CSS - it works in all browsers.

Imagine you have two columns and are going to stretch the columns to fill the browser’s window. Simply assigning 50% width to each column wouldn’t stretch the columns perfectly to fill the browser’s window because the sum of 50% + 50% is not always 100% in all browsers. In fact the actual value can be 101% and it causes layout to break in those browsers.

Here is how IE6 renders those columns:IE6 rendering

To avoid this problem in IE and other browsers, simply assign 49% and 50% width to each column so they will be displayed correctly in all browsers:

firefox rendering

15 comments

Have your say