Saturday 04th of July 2009 02:36:52 AM

left

#left {
position: absolute;
left: 2%;
width: 19%;
top: 106px;
background-color: #ffffff;
}

Warning

These pages use certain CSS definitions that are unsupported by older browsers.
more nice and free css templates

middleleft

#middleleft {
position: absolute;
left: 22%;
width: 28%;
top: 106px;
background-color: #ffffff;
}

Calculations in your head

This example requires some calculations. The sum of the widths yields 98%. The distance from the border of body to the first box plus its width plu the distance yields the left position of the next box.

If you want boxes of different width you need to adjust these values accordingly.

Use of this code is encouraged!

Try it with 2 or 3 columns

middleright

#middleright {
position: absolute;
left: 51%;
width: 28%;
red, and some white, for example.
Now, thanks to the power of CSS, you can have many, many differentcolors within a single page, and without using a singleFONT tag. This gives authors the ability to set uppages where the main text is black with a white background, but thenavigational hyperlinks along the side of the page are black on alight purple background. There are almost infinite possibilities:defining red text for warnings, using a dark purple to make boldfacedtext even more obvious, setting each heading to be a different shade
top: 106px;
background-color: #ffffff;
}

box border

Borders, pading and margin are defined in

#right,#middleright,#middleleft,#left{
border: 1px solid #564b47;
padding:0px;
margin:0px;
}

Font definitions

Padding are passed to p, h1 and h3.

p,h1, h3, pre {
padding: 5px 15px;
margin: 0px;
}

right

#right {
position: absolute;
left: 80%;
width: 18%;
top: 106px;
background-color: #ffffff;
}

open code

Use of this code is encouraged! (o_.)/