Saturday 21st of October 2017 06:39:06 AM

center a FIXED BOX

This BOX has a fixed width.
It is centered and adjusts to the browser window.
The height adjusts to the content.
more nice and free css templates

body {
background-color: #e1ddd9;
font-size: 12px;
color:#564b47;
padding:20px;
margin:0px;
text-align: center;
}
#inhalt {
text-align: left;
vertical-align: middle;
margin: 0px auto;
padding: 0px;
width: 550px;
background-color: #ffffff;
border: 1px dashed #564b47;
}

DIV#sidebar {position: absolute; top: 0; left: 0; width: 5em; height: 7em;overflow: hidden; overflow-clip: rect(0.5em, 4em, 6.5em, 1em);}

This sets the clipping area inward half an em from the top andbottom, and one em from the right and left. This would cause a resultsomething like that shown in Figure 9-11, where adashed line has been added to illustrate the edges of the clippingregion. This line would not actually appear in a user agentattempting to render the document.

<P>This paragraph is contained within a DIV with a width of 100 pixels, so its margin will still be 10% of the width of the paragraph's parent. There will, therefore, be half as much margin on this paragraph as that on the first paragraph.</P></DIV>
Figure 7-10

Figure 7-10. Parent widths and percentages

While this is interesting enough, consider the case of elements without a declared width, whose overall width (including margins) is therefore dependent on the width of the parent element.

9.1.4.1. Overflow

So let's say that you have, for whatever reason, an elementthat has been pinned to a specific size, and the contentdoesn't fit. You can take control of the situation with theoverflow property.

overflow

This property only applies in one (or more) the following cases: