content column

All templates are XHTML 1.0 and CSS2/ tableless.

2 columns / menu and content dynamic
2 column layout grid. The navigation column and content column are dynamic and adjust themselves to the browser window.
This 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 {
float: left;
width: 75%;
background-color: #fff;
margin:0px 0px 50px 0px;
overflow: auto;
assign weights to various elements. You can do this, in theory, using the various values for the property font-weight. A fairly obvious font-weight declaration is this:

B {font-weight: bold;}

This says, simply, that the B element should be displayed using a boldface font; or, to put it another way, a font that is heavier than is normal for the document, as shown in Figure 5-8. This is what we're used to, of course, since B does cause text to be boldfaced.

Figure 8-4

Figure 8-4. One way to handle a short height on a tall element

In practice, most browsers will not do this. They will instead simply increase the height of the element, as though the value of height had been set to auto. This is permitted under CSS1, which states that browsers can ignore any value of height other than auto if an element is not a replaced element such as an image. Under CSS2, it is possible to set up acolumns are of roughly equal length. We can do this now because regardless of what we do to the title, the columns will be the same length. So we move the divisions appropriately. Note that we may not get an exact balance because of the need to break the divisions between paragraphs. Whether the longer column should be the first or the second is up to you.

With all that done, all that remains is for us to recreate the document's title. Looking at it closely in Figure 11-14, we see that this is an interesting specimen: it's right-justified and yet not aligned with the right marginfloating the element will cause its width to tend toward zero unlessan explicit width is assigned; thus, width assignment is a crucialpart of floating any nonreplaced element.


IMG {float: left;}


left | right |none