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:
-
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
-
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