Monday 29th of May 2017 05:02:51 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


css


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 default value none will simply leave the text alone and use whatever capitalization exists in the source document. uppercase and lowercase cause the text to be converted into all upper- or lowercase characters, as their names would indicate. Finally, capitalize causes the first letter of each word to be capitalized and leaves the rest of the characters in each word alone. (Note that for the purposes of this property, a "word" is the same as discussed in the section on width: 1em;}

This will result in approximately what is seen in Figure 11-22.

However, as you probably know, older browsers don't support the :first-letter pseudo-element. In many of these -- Internet Explorer 3.x and Navigator 4.x, for example -- there is no alternative. In Internet Explorer 4.x and 5.0, however, you can use a SPAN element to fake your way around the lack of support for :first-letter. Here's how it works: