Saturday 04th of February 2012 06:49:41 PM

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%;
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;
the appropriate distance from the bottom of the
DIV. The fact that it overlaps the paragraph
doesn't matter, at least not technically.

Now let's consider an example where the margins of a list item,
an unordered list, and a heading are all collapsed. In this case, the
unordered list and heading will be set to have negative margins:

The larger of the two negative margins (-18px ) is
added to the largest positive margin (20px ),
}

right

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

open code

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