HTML Page Layout with CSS

Center feature, align layers, and...

Center the page horizontally

A very simple solution is given by the W3C specification. If the margin-left and margin-right properties are set to auto, the content is centered horizontally. So, to center the entire page, you need to create a global layer containing all the others (this does not work on the body) and assign this property to it :

#outer { margin:0 auto;}

This can be applied to any item on the page.

Position the element in the middle of the HTML page (centered)

So center it both vertically and horizontally. With this fairly simple CSS code that has been compatible with all browsers since IE8:

.centered
{
position:absolute;
margin:auto;
top:0;
left:0;
bottom:0;
right: 0;
height:50%;
width:50%;
}

Dimensions can be absolute or percentage. This can be used to create a light box with the display: none property, which can be dynamically changed to display: block.

Align two page sections side by side

For example, if you insert an image into text and want the text not to surround the image, but to be located next to it in the same column.
We use the float and overflow properties:

<img src="images/html5-logo.png" width="64" height="64" style="float:left">
<div style="overflow:hidden;">...text...</div>

Filling space with div tag

When you assign a height of 100% to a layer, it fills the space in the containing layer. The problem is that if you add another element, then the whole thing will overflow from the containing layer. With overflow: hidden, part will be hidden.
So how do you fill a space in a container? Without using a fixed height, because you have to adjust the dimensions that the user can change to the window. The solution is to give the containing layer a substrate-bottom property, the height of which will correspond to the height of the second element. Example:

<div style="padding:bottom:10px">
<div style="height:100%"></div>
<div style="height:10px"></div>
</div>

If you want to maintain the height of the container, you must add a box size property as shown on this page.
Padding reduces the specified height to 100%, freeing up space for the second element and preventing overflow.

See also:

HTML application interface. The layout of the page content is fully adapted to the size of the window.