Question

I want to create a page with a horizontal centered content block that reaches from teh top to the bottom of the browser window. I already figured out that tables are not the right way to design a layout. A block that reaches from top to bottom is not the problem:

<div style="position:absolute;top:0px;width:800px;height:100%;background-color: #fff;">
</div>

But I’m not able to make this Div centered. I tried

“margin:auto”

But no effect. Th centers the text in the Div, but not the Div itself on th screen.

Answer 1

Try not to use position:absolute for layouts unless necessary. This sample shows best practice for horizontally centering your content.

If you need a solution that will continuously work to restrain the content area height within the viewable area, try my jQuery solution: http://jsfiddle.net/BumbleB2na/Z75hA/