Skip to content

Centering mixed height pages

This is a quick and easy way to center all your website pages, even if they are longer than the browser window and usually cause scollbars to move the page over slightly! This is especially usefully if you want the layout to stay lined up from page to page.

Hopefully you are using css to format all your pages the same way. Open up your css file and if it doesn’t exist already then create a html sytle like this :
[code lang="html4strict"]
html {
min-height: 100%;
margin-bottom: 1px;
}
[/code]
Now your page will always be 100% of the browser hight and will have a border of 1px on the bottom so that they’re just a tiny bit bigger than 100% and so will have a scrollbar even if the content would usually never have a scroll bar.

All your pages will now have the same browser window width so will all center in the same place.