Friday 15th of December 2017 08:36:31 PM

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;
}


increase the height of the element, as though the value ofheight had been set to auto.This is permitted under CSS1, which states that browsers can ignoreany value of height other thanauto if an element is not a replaced element suchas an image. UnderCSS2, it is possible to set up asituation where scrollbars would be applied to an element such as aparagraph.element whose font-size has changed. For example:

P {font-size: 14pt; line-height: 16pt;}
SPAN {background: gray;}
BIG {font-size: 250%; line-height: 1em; background: silver;}
...line in which</SPAN><BIG>some big text</BIG><SPAN>is found...

The results of this are shown in Figure 8-61. By setting a line-height for the BIG element, the overall height of the line box has been increased, thus providing enough room for the percentage values, although they behave in a rather interesting way. Let's say that you want to center a background image within its element by using percentage values. That's easy enough:

BODY {background-image: url(bigyinyang.gif);
background-repeat: no-repeat;
background-position: 50% 50%;}

This causes the background image to be placed such that its center is aligned with the center of its parent element, as demonstrated in Figure 6-39. In other words, the percentage values to write the following:

H1 {margin: 10px 20px 20px 10px;} /* can't be any shorter */

Unfortunately, there is no way to cut down on the number of values needed in such a circumstance.

Let's take another example: one where we want all of the margins to be auto -- except for the left margin, which should be 3em :