Wednesday 24th of January 2018 03:02:18 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;
}


STYLE tags but the declarations as well, because HTML comments are not displayed. Meanwhile, those browsers that understand CSS will still be able to read the style sheet.

WARNING

There is one drawback to this strategy. A few versions of older browsers, such as very early versions of Netscape Navigator and NCSA Mosaic, had some trouble with comments. The problems ranged from simple manner. The absolute value of the negative margin issubtracted from the positive margin -- or, to put it another way,the negative is added to the positive -- and the resulting valueis the distance between the elements. Figure 8-21provides two concrete examples.

Figure 8-21

Figure 8-21. Examples of negative vertical margins

You'll notice the "pulling" effect of negative topand bottom margins. This is really no different from the way in whichnegative horizontal margins cause an element to push outside of its

Figure 9-23

Figure 9-23. Nested absolutely positioned elements

The small box B in the lower-left corner of the element A is a childof A, which is in turn a child of a relatively positionedDIV. B was absolutely positioned, as was elementA, using styles like these:

DIV {position: relative;}P.A {position: absolute; top: 0; right: 0; width: 15em; height: auto;margin-left: auto;}P.B {position: absolute; bottom: 0; left: 0; width: 10em; height: 50%;