Monday 20th of November 2017 02:46:03 AM


#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;

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;

floated elements) is an inline element. Setting box properties for inline elements gets into even more interesting territory than we've already covered. Some good examples of inline elements are the EM tag and the A tag, both of which are nonreplaced elements, and images, which are replaced elements.

top: 0; bottom: 0; left: 0; right: 50%;
Figure 9-4

Figure 9-4. Filling the left half of the containing block

Since the default value of both width and height is auto, the result shown in Figure 9-4 is exactly the same as if you had used these styles:

top: 0; bottom: 0; left: 0; right: 50%; width: auto; height: auto;

Now let's say you want to position an element that is in the upper-right corner of its containing block and is one-third as wide

Remember that if you float a text element, its width will tend toward zero. This is exactly the opposite of the normal horizontal rules, where width is increased until the seven properties equal the parent's width. A floated element's width will default to auto, which then defaults to zero, which is then increased to the browser's minimum allowed width. Thus, a floated paragraph could literally be one character wide -- assuming that to be the browser'sA:visited {color: rgb(20%,20%,20%);}

This gives us our dark green and dark gray hyperlinks.

Now for headings. They're all supposed to be in a sans serif font, but H1s have some special rules. In order to cover all the bases in a compact manner, we declare:

H1, H2, H3, H4, H5, H6 {font-family: Verdana,sans-serif;}
H1 {color: rgb(0%,40%,0%); border-bottom: thin solid; width: 100%;}

With the second declaration, not only do we use the standard color, but we enhance the idea of "underlining" by setting a