Wednesday 24th of January 2018 03:01:55 AM


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;
margin: 20px 140px  20px 140px;
text-align: center;
#content {
P {margin-left: auto; margin-right: 100px; width: 100px;} 

The results are shown in Figure 8-11.

Figure 8-11

Figure 8-11. Automatic left margin

In a sense, auto can be used to say, "make up the difference between everything else and the required total." However, what if all three of these properties are set to 100px , and none of them to auto ?

In the case where all three properties are set to something other width: 100%; padding: 0px; text-align: left; background-color: #fff; overflow: auto; }

Youmay have noticed that in almost every circumstance, where we set aforeground color, we also set a background color. In general, this isa good idea. Since you don't know what styles a user may havepredefined, you don't know how your styles might interact withthem. Remember the example where links ended up being white on white?That's the sort of thing we want to avoid.

Let's explore this in a little more detail. Assume thefollowing: paragraphs that contain identical text. However, the first paragraph contains an inline boldface element, and the second an absolutely positioned boldface element. In the second paragraph, the styles used would be something like what is shown here:

P {position: relative;}   /* establish containing blocks */
<B STYLE="position: absolute; top: auto; right: 0; bottom: 0; left: auto;
width: 8em; height: 4em;">...</B>
Figure 9-19

Figure 9-19. The effects of absolute positioning

For the most part, the text in both paragraphs looks fairly normal.