Wednesday 26th of July 2017 10:44:34 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;
#content {
border-right:2px solid #996666;
border-bottom:2px solid #996666;

"fluid" pages, where the margins and padding of elements enlarge or reduce to match the actual size of the display canvas. In theory, as the user changes the width of a browser window, the margins and padding will expand or shrink dynamically -- but not every browser supports this sort of behavior. Still, using percentages for margin and padding may be the best way to set styles that will hold up in more than one media; for example, documents that will look good on a monitor as well as a printout.

300 pixels tall by 300 pixels wide. Then, assume that only the bottomright third of it should be visible. We can get the desired effect(shown in Figure 6-45) like this:

BODY {background-image: url(bigyinyang.gif);background-repeat: no-repeat;background-position: -200px -200px;}
Figure 6-45

Figure 6-45. Using negative length values

Or, let's say we want a little more of it visible, as in Figure 6-46:

This all seems simple enough, but when the boldfaced text stretches across multiple lines, the situation becomes a little odd. First, realize that the margins set for inline elements are not applied at the point where line-breaking occurs. This line-breaking happens in the course of wrapping text so that it fits inside the browser's window, for example, or inside a parent element. The only effect margins have on line-breaking is that, by causing extra space to appear within the line, they can move content over. This may cause a line to break at a different spot than it ordinarily would have.