Purely CSS – Faking Different Color Columns

We want to create a layout with two columns, each a different color, yet have both colors extend the the edge of the browser. This is a technique intended for people that want a multi-colored column fixed width eg. 960px layout.

The secret behind this technique is an 3000 pixel width background image don’t worry about file size – it’s only 360 bytes. This image will be the background of the element that contains our two columns. Since it extends beyond even a 30″ resolution 2560 pixels wide, it will effectively fill in the gaps in color between the edges of our two columns and the edge of the browser window…

chevron_left
chevron_right

Leave a comment

Your email address will not be published. Required fields are marked *

Comment
Name
Email
Website