Camen Design

c share + remix

Vertical Split Screen CSS Without Background Images

Doing columns with CSS is easy, but what if you want to split the whole screen into two different colours (or textures)—so that the columns touch the edges of the screen—with the body remaining centred?

Most developers achieve this by applying a background image to the window that includes the two colours rather than using a physical element because of the difficulty of positioning.

One thing I see often on the ’Web that annoys me is sites who use background images to fake columns without providing a fallback colour—that wait for the black text on black background to suddenly rectify itself.

Here is a method for providing a screen split effect without faking it with an image.

The core part of the trick is to create a large negative space on your left column to hang off of the centred body, e.g.:

#leftcol	{display: block; position: absolute; top: 0; bottom: 0; width: 260px;
		 margin-left: -1600px; padding-left: 1600px;}

The large negative margin pulls the element far to the left (off the screen) and then puts the contents of the column back on the centered body with an equal sized padding. This means regardless of the width of the screen, the column will always go from the centered body to the screen edge.

A few other minor adjustments (IE7/8 require “position: relative;” on the body to work), and you have a vertical split screen effect without a fake background image, and more importantly, without a wrapper!

Here is the test page. View the source for details.