Thursday 21st of September 2017 02:06:31 PM


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


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



#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 {
position: absolute;
left: 51%;
width: 28%;
top: 106px;
background-color: #ffffff;
(left) is copied from the second
(right). If there are two values given,
the fourth is copied from the second, and the third
(bottom ) from the first
(top ). Finally, if there is only one
value given, then it's copied to all the others.

This simple mechanism allows authors to supply only as many values as necessary, as shown here:


box border

Borders, pading and margin are defined in

border: 1px solid #564b47;

Font definitions

Padding are passed to p, h1 and h3.

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

and down. In a similar fashion, when the repeat direction is horizontal, the background image is repeated to both the right and the left, as shown in Figure 6-50:

BODY {background-image: url(bg23.gif);
background-repeat: repeat-x;
background-position: center;}
Figure 6-50

Figure 6-50. Centering with a horizontal repeat

Therefore, setting a large image in the center of the BODY and then letting it repeat will cause it to