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…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Faux Columns – Equal height columns with CSS

“How do you get the right column’s background color to extend all the way down the page?”

It’s a simple concept. One that many of you may already be familiar with. But for those who aren’t, the following technique can be a handy little trick…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)