Friday 23rd of March 2018 12:13:46 AM


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

That pretty well covers how line boxes are generated, at least in the simplest cases. As we're about to see, however, the inline formatting model is not exactly simple.

8.4.2. Inline Formatting

As we saw in Chapter 4, "Text Properties", all elements have a line-height. This fact has a great deal to do with


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;

9.3. Absolute Positioning

Sincemost of the examples and figures in the chapter (besides the previoussection) have been examples of absolute positioning, we'realready halfway to an understanding of how it works. Most of whatremain are the details of what happens when absolute positioning isinvoked.

When an element is positioned absolutely, it is completely removedfrom the document flow. It is then positioned with respect to its90% the height of the containing block, since 100% - - 10% = 90%. This assumes, of course, that there have been no margins, borders, or padding set for the positioned element; otherwise, the effective height would be decreased, although the entire element (content, padding, borders, and margins) would still be 90% as tall as the containing block.

Similarly, if we specifically declare a height but leave bottom as auto, then something like Figure 9-7 will occur: it's more than enough, another area of expansion is inpseudo-class and pseudo-element selectors. :hover

To begin,there is :hover. The basic idea is that the stylesin a :hover rule are applied while your mousepointer is "hovering" over an element. For example, whenthe pointer is positioned over a link such that clicking the mouse very common example of an increased font weight. Generally speaking,the darker and "more bold" a font appears, the heavier itis said to be. There are a great many ways to label the heaviness offonts. For example, the font family known as Zurich has a number ofvariants such as Zurich Bold, Zurich Black, Zurich UltraBlack, ZurichLight, and Zurich Regular. Each of these uses the same basic font,but each has a different weight.

So let's say that you want to use Zurich for a document, butyou'd like to make use of all those different heaviness levels.