Sunday 28th of May 2017 06:26:46 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%;

Wow! What happened? Simply put, each nested list cuts the font sizeby a quarter. Let's assume the document's basefont-size is 12pt. Therefore,at the top level, the font's size will be three-quarters ofthat, or 9pt. All well and good, except the nextlevel down will see a reduction to 6pt, and thenext level to 4pt, and so on. Once the text goesbelow 7pt, it will become unreadably small on mostmonitors (and will be tough to read even on most printouts).

top: 106px; background-color: #ffffff; }

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;

text, as shown in Figure 8-45. Note that we'veput a border around the line; this has been accomplished by wrappingthe entire line in a SPAN element, and assigningit a border style:

SPAN {border: 1px dashed black;}
Figure 8-45

Figure 8-45. A single-line inline element

This is the simplest case of an inline element contained by ablock-level element, no different in its way than a paragraph withtwo words in it. The only differences are that in Figure 8-45, we have a few dozen words and that most