Friday 03rd of July 2009 07:53:52 AM

left column

All templates are XHTML 1.0 and CSS2/ tableless.

2 columns / menu and content dynamic
2 column layout grid. Both columns are dynamic and adjust themselves procentually to the browser window.


more nice and free css templates


body {
background-color: #8b4513;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
padding:0px;
margin:0px;
}
#content {
float:left;
width:70%;
background:#fff;
border-right:2px solid #996666;
border-bottom:2px solid #996666;
margin-right:15px;
padding-bottom:20px;
}


layout.

A perfect example is an unordered list, in which the list items follow one another. Assume that the following is declared for a list that contains five list items: 

LI {margin-top: 10px; margin-bottom: 15px;}

Thus, each list item has a 10-pixel top margin and a 15-pixel bottom margin. However, when the list is rendered, the distance between adjacent list items is 15 pixels, not 25. This is because along the

Negative margins have an impact on vertical formatting, affecting howmargins are collapsed. If there are negative vertical margins, thenthe browser should take the absolutemaximum of the negative margins and subtract that from the maximum ofany positive margins.

In the case where there are only two margins to be collapsed, onepositive and the other negative, the situation is handled in a fairlysimple manner. The absolute value of the negative margin is DIV.

Even better, you can string more than one child selector together to precisely target a given type of element. Take this, for example:

Figure 10-4

Figure 10-4. Selecting grandchildren only

The first list item in the source is silver because it's the child of an ordered list that is itself the child of a BODY. The second list item in the source is the child of an unordered list, so it can't match the rule.

If you do float a text element, realize that unless you declare a width for that element, the CSS specification says that its width will tend toward zero. Thus, a floated paragraph could literally be one character wide, assuming that to be the browser's minimum value for width. In order to avoid this problem, make sure that you declare a width for your floated elements. Otherwise, you could get something like Figure 7-66.