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…

Really Simple CSS Trick for Equal Height Columns

This tutorial describes a really simple CSS trick to implement a fake equal height columns effect using the CSS properties position:absolute and border. Before to proceed I suggest you to download my CSS 2 Visual Cheat Sheet for a practical reference guide to CSS 2 properties that can help you understand concepts illustrated in this post…