Free CSS Layouts

Sunday 22nd of October 2017 12:59:07 AM

Free CSS Layouts

Please feel free to borrow, steal, abduct, and/or torture the documents contained here. Enjoy.

Two Column Layouts

2 columns - left menu

A simple two column layout with the standard left-side menu.

2 columns - right menu

Practically the same HTML as 2 columns - left menu, but with a different stylesheet.

Three Column Layouts

3 columns - flanking menus

BODY {background-image: url(yinyang.gif);background-repeat: repeat-x;}

Now the image is repeated along the x-axis (in other words,horizontally), as illustrated in Figure 6-31.

Figure 6-31

Figure 6-31. Tiling along the horizontal axis

Finally, of course, we may wish not to repeat the background image atall. In that case, we use the last value,no-repeat, which is illustrated in Figure 6-32:

Three columns, no tables, intelligent order of elements. What more is there to say?

Many a talented web designer has struggled with CSS-based centering. Though CSS vertical centering eludes us, two techniques for horizontal centering are approved. Take your pick: Auto-width Margins or Negative Margin.

P {font-size: 18pt;} <DIV> <P>This paragraph's 'font-size' is 18pt, but the inherited 'line-height' is only 12pt. This may cause the lines of text to overlap each other by a small amount.</P> </DIV>
Figure 4-24

Figure 4-24. Small line height, large font size, slight problem

There are two solutions. One is to set the line-height explicitly for every element, but this is not a very practical approach, given that you may have a number of