Saturday 24th of February 2018 08:31:07 PM

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

"containing block," so will this text. (We do try to minimize confusion. Really!)

The values of position have the following meanings:

static

The element's box is generated as normal. Block-level elements generate a rectangular box that is part of the document's flow, and inline-level boxes are generated in the context of one or moreFigure 8-52.

Figure 8-52

Figure 8-52. The final paragraph of stacked line boxes

As we can see, the middle line is taller than the other two, but it still isn't big enough to contain the text within it. That's because the position of the inline boxes in the line forces it to be taller than 12 pixels, but the line-box still isn't tall enough for the text to avoid overlapping other lines.