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;
shown in Figure 9-4 is exactly the same as if youhad used these styles:

top: 0; bottom: 0; left: 0; right: 50%; width: auto; height: auto;

Now let's say you want to position an element that is in theupper-right corner of its containing block and is one-third as wideas its containing block, but only as tall as necessary to display itscontent, as shown in Figure 9-5.

Figure 9-5

Figure 9-5. "Shrink-wrapping" a positioned element

} #content { margin-left: 200px; background-color:#fff; overflow: auto; }
<P> Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut <SPAN CLASS="change">***</SPAN> laoreet dolore magna aliquam erat volutpat.</P>
Figure 9-22

Figure 9-22. Another approach to defining a "change bar"

Remember when we mentioned static-position much earlier in the chapter? Here's one example of how it works and how it can be very useful.

Another important point is that when an element is positioned, it establishes a containing block for its descendant In-Line Images

Okay, now that you know how to format text on the page, let's includesome in-line images.  The web supports images in GIF, JPEGor PNG formats. GIFs can have up to 256 colors.  JPEGs andPNGs can have millions (although clients' monitors may not display themall). JPEGs use a "lossy" compression that reduces image quality; GIFsand PNGs have lossless compression.  The next chapter covers imageediting strategies, etc.  Here we just summarize image placement onthe page with the<IMG> tag:

If you want to overcome this space, you can always use negativemargins. Here's one possible declaration:

H1 {margin-bottom: 0;}P {margin-top: -1em;}

The problem with this solution arises when the document is viewed inInternet Explorer, which will displaywhat's shown in Figure 7-27. The overlappingtext is not a mistake on Explorer's part -- it's doingexactly as you specified. Basically, there isn't an easy way to