Wednesday 10th of March 2010 07:06:30 PM

center

This BOX ist centered and adjusts itself to the browser window.
The height ajusts itself to the content.
more nice and free css templates 

body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
color:#564b47;
margin: 20px 140px  20px 140px;
text-align: center;
}
#content {
width: 100%;
padding: 0px;
text-align: left;
background-color: #fff;
overflow: auto;
}

collapsed. If you somehow manage to have two block-level elementsnext to each other, and each has a margin, the margins will notcollapse. The easiest way to illustrate this principle is to setmargins on two images and then have them appear on the same line, asthey do in Figure 8-6:

<IMG SRC="test1.gif" STYLE="margin: 5px;" ALT="first test"><IMG SRC="test2.gif" STYLE="margin: 5px;" ALT="second test">

(Note that the images in Figure 8-6 are actuallyinline elements, but they effectively demonstrate that horizontally doesn't do so randomly, exactly, but the effect is practically the same. For example, invalidValue comes out as a dark blue, and inherit, which is a valid value under CSS2 but not CSS1, will come out as a really awful shade of yellow-green. This is not correct behavior, but you'll need to remember it as you write your styles.

BODY and the fifth paragraph in a document would lead to a situation similar to that shown in Figure 9-20: 

BODY {position: relative;}
<P STYLE="position: absolute; top: 0; right: 25%; left: 25%; bottom: auto;
width: 50%; height: auto; background: silver;">...</P>
Figure 9-20

Figure 9-20. An absolutely positioned paragraph

The paragraph is now positioned at the very beginning of the document, half as wide as the document's width and overwriting the first few elements! below 7pt, it will become unreadably small on most monitors (and will be tough to read even on most printouts).

You're probably thinking to yourself, "Ha! How dumb do you have to be to shrink text in lists like that?" True, it's easy to spot this with lists. However, think about how most of your pages are structured (with nested tables) and then consider this rule: 

BODY {font-size: 12pt;}
First is that in Navigator 4 and Internet Explorer 4, tiling only
happened down and to the right. If you're using Explorer 4,
centering an image in the background and then tiling it would look
like Figure 6-52.



Figure 6-52
Figure 6-52. Incorrect behavior in Internet Explorer 4


Navigator 4 manages to avoid this error by not honoring background
positioning at all, which means that the origin image
always appears in the top left corner of an
element under Navigator 4. Of the browsers that correctly position