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;
right along with it. This is because the element's containingblock is the BODY element's content area,not the viewport. If you want to position elements so thatthey're placed relative to the viewport and don't scrollalong with the rest of the document, then the next section is foryou.

Before we get there, however, there are a few more things to cover.Remember that absolutely positioned boxes can have backgrounds,margins, borders, and padding; styles can be applied within them, background-color:#fff; overflow: auto; }

CSS2, it is possible to set up asituation where scrollbars would be applied to an element such as aparagraph.

It's also possible to set the top and bottom margins of ablock-level element to be auto. If either of theseproperties is set to auto, it is reset to0 (zero), effectively removing any top or bottommargin from the element box, as shown in Figure 8-5. The lack of any space between the borders ofeach paragraph is a result of auto being load, as in Figure 6-26.

Figure 6-26

Figure 6-26. The consequences of a missing background image

Given this reason alone, it's always a good idea to specify abackground color when using a background image, so that your whitetext will at least be visible:

P.starry {background-image: url(;background-color: black; color: white;}<P CLASS="starry">It's the end of autumn, which means the stars will be
with the concept of floated elements. Ever since Netscape 1.0, it has
been possible to float images by declaring, for instance,
<IMG SRC="b5.gif"
align="right">. This causes an image to float
to the right, and allows other content (text or other images) to
"flow around" the image. In the past, this was only
possible with images and, in some browsers, tables. CSS, on the other
hand, allows any element to float, from images to paragraphs to
lists. In CSS, this behavior is accomplished using the property
which is the same as white. This approach issometimes called shorthand hexnotation.

One thing to watch out for is that with the hexadecimal methods,unlike the numeric methods, there are no defined clipping methods forthe hex-pair systems. If you enter an invalid value, thebrowser's response could be unpredictable. A well-writtenbrowser will perform clipping so that out-of-range values are assumedto be whichever limit they exceed, but you can't necessarily inline elements; the left and right sides are a different story. We'll start by considering the simple case of a small inline element within a single line, as depicted in Figure 7-52.

Figure 7-52

Figure 7-52. An inline element

Here, if we set values for the left or right border, not only will they be visible, but they'll displace the text around them, as we see in Figure 7-53:

With borders, just as with margins, the browser's calculations for line-breaking are not directly affected by any