DIVs vs. Tables
Down for Maintenance
Custom Error Pages
Escaping query strings
Google App testing
Avoid AS Statics
Split a background color on the page
Sometimes I see requests on how to divide the page background color half and half. One half one color, the other half, another color. So here is a simple way to do it.
<body style='background-color: red; margin: 0px; height: 100%;'>
<div style='position: fixed; top: 0; left: 0; width: 50%; height: 400%; background-color: yellow; z-index: 1;'></div>
<div style='position: absolute; top: 0; left: 0; z-index: 2; width: 100%;'>
To have a web page background be half one color and half another color. Great for a two-tone look.
More details below ...
Properties to split a background
margin ensures the color DIVs used later are pushed right to the edge of the browser window. height: 100%; is useful for the first DIV block discussed below:
The first DIV block
This block covers half the background color of the body. position: fixed instructs the browser to take the block out of normal page flow and just let it sit at position 0,0. z-index: 1 ensures the block is on top of the body but below the next div block. In IE it may be helpful to specify a height that is greater than 100% in order to ensure the color extends down to the bottom of your web page.
The second DIV block
The second DIV block is your writing canvas. It establishes a full page on which to build your web page that is over top of the half/half background colors. z-index: 2 is the key line that places on top of everything else. Notice position: absolute;. "fixed" should work just as well but does not in Internet Explorer in some cases.
This example just shows how to have 2 background colors but there isn't any reason you can't squeeze in a few more
background colors using the z-index property.
Did you find this article userful for your website?
If so, why not provide a link to it? Just copy the following to your web page: