content column

All templates are XHTML 1.0 and CSS2/ tableless.

2 columns / menu fixed, content dynamic.
2 columns layout grid. The navigation column is fixed, the content column is dynamic and adjusts itself to the browser window.
The layout also works with an absolute height template 100% height
more nice and free css templates

html {
body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
padding:0px 20px;
#content {
margin-left: 200px;
overflow: auto;
<DIV STYLE="width: 100px;"><P>This paragraph is contained within a DIV with a width of 100 pixels,so its padding will still be 10% of the width of the paragraph's parent.There will, therefore, be half as much padding on this paragraph as thaton the first paragraph.</P>
Figure 7-59

Figure 7-59. Padding, percentages, and the widths of parent

We've seen this before, of course -- in Section 7.3, "Margins", in case you don't remember -- butit's worth reviewing again, just to see how it operates.

BODY {background-image: url(tile1.gif);  background-repeat: repeat;background-attachment: fixed;}H1 {background-image: url(tile2.gif);  background-repeat: repeat;background-attachment: fixed;}
Figure 6-57

Figure 6-57. Perfect alignment of backgrounds

How is this perfect alignment possible? Remember, when a backgroundis fixed , the origin element is positioned withrespect to the canvas. Thus, both background patterns begin tilingfrom the top left corner of the document, not the individual

  • mailto:  = compose and send e-mail (note: no slashes)
  • news:  = read/send to Usenet newsgroup
  • file:///  = local file access (note: 3 slashes)
  • Web servers typically have 3- or 4-part names; the last two parts comprisethe registered domain name, e.g.,  Some webservers are configured as virtual hosts serving files under multiple notation

    One thing to watch out for is that with the hexadecimal methods, unlike the numeric methods, there are no defined clipping methods for the hex-pair systems. If you enter an invalid value, the browser's response could be unpredictable. A well-written browser will perform clipping so that out-of-range values are assumed to be whichever limit they exceed, but you can't necessarily count on this. As an example, Netscape Navigator 4.x will not ignore or clip an invalid color value, but will instead perform some sort of border.

    This behavior can be altered by assigning padding to the inline element, which will push the borders away from the text itself (shown in Figure 8-58):

    SPAN {border: 1px dashed black; padding: 4pt;}
    Figure 8-58

    Figure 8-58. Inline padding and line-box layout

    Note that this padding does not alter the actual shape of the content-height, and so will not affect the height of the inline box