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.

Limitations

• This does not work in IE6, the left column stops with the content, and the body won’t automatically stretch to the bottom of the screen:

  

  You can use JavaScript to fix this, but if anybody knows how to solve this with CSS, please get in touch.

• If the left column content is longer than the main column (the left column can be longer than the screen), the left column will scroll. It’s intended that the left column content will always be shorter than the main column.

  

  Alternative actions you can take are:

  1. If it’s not important if the left-column content gets cut off on some pages, then just use “overflow: hidden” to cut off the excess content and remove the scroll bar

  2. If you want the left-colum to stay at the top whilst the rest of the page scrolls, use “position: fixed”. Note that any content beyond the screen height will be cut off