How to Centre and Layout Pages Without a Wrapper
The number one suggestion I see from the proprietor of
html5gallery.com to submitters is not to use the
“<section>
” element as a glorified
“<div id="wrapper">
”. Here, I shall demonstrate that
“<body>
” is already a wrapper and can be hacked to
achieve some pretty remarkable layout and clean code!
Let me just repeat that. The body element is already a wrapper. It can have a height, width, border,
drop-shadow; you name it. Take for example, this markup:
<!DOCTYPE html>
<style>
body {width: 600px; margin: 20px auto; /* center */ padding: 20px;
border: 1px solid black;}
</style>
<body>
The Quick Brown Fox.
</body>
(Note that <html>
, <head>
and even <body>
are
optional in HTML!)
Now let’s add a background colour.
<!DOCTYPE html>
<style>
body {width: 600px; margin: 20px auto; /* center */ padding: 20px;
border: 1px solid black;
background: #eee;}
</style>
<body>
The Quick Brown Fox.
</body>
How odd. The whole window is grey, and not just the body element at the top. This is a compatibility quirk of
browsers that normally assume that when setting a background on the body, it should cover the whole window. This is
easily fixed.
<!DOCTYPE html>
<style>
html {background: #c72;}
body {width: 600px; margin: 20px auto; /* center */ padding: 20px;
border: 1px solid black;
background: #eee;}
</style>
<body>
The Quick Brown Fox.
</body>
Simply add a background to the HTML element! The HTML element is also a wrapper! Yes, you can have two
background-images without a wrapper. One on <html>
, and one on <body>
, with
their own position / repeat placement. The HTML element is more restricted in what you can do with it, but
experiment with it and find out.
But why doesn’t the body stretch the full height of the browser window? It is commonly thought, that just because
setting a background colour or image on the body element fills the whole window, that the body element itself
automatically fills the whole window too. This is the case in Internet Explorer, but is not in any other browser.
The body element will only be as tall as what content is within it.
<!DOCTYPE html>
<style>
html {height: 100%; background: #c72;}
body {min-height: 100%; width: 600px; margin: 0 auto; /* center */ padding: 0 20px;
border: 1px solid black; border-width: 0 1px;
background: #eee;}
</style>
<body>
The Quick Brown Fox.
</body>
Here we have forced the HTML element to be 100%. The size of the body element can only be calculated based on a
known HTML element size—the HTML element is also only as high as the content within it! Setting the
height of the body element to 100% alone doesn’t work because of this fact.
We use min-height: 100%;
because in browsers other than Internet Explorer, content that is
longer than the fixed height of an element just spills over the edge.
min-height
ensures that the body is at least 100% high, but expands for content longer than
that. We could of course use the overflow
property with a body that is fixed to a height of 100%
for a neat hack:
<!DOCTYPE html>
<style>
html {overflow: hidden; height: 100%; background: #c72;}
body {overflow: auto; height: 100%; width: 600px; margin: 0 auto; /* center */ padding: 0 20px;
border: 1px solid black; border-width: 0 1px;
background: #eee;}
</style>
<body>
Lorem ipsum dolor sit amet, … anim id est laborum.
</body>
Setting overflow
to hidden
on the HTML element removes the scrollbar from the window.
Setting overflow
to auto
on the body, then gives it a scrollbar because its height is
fixed to 100% and the content is taller than the window.
This even works in Internet Explorer 6 and above. That’s cute; now let’s do something advanced.
This page uses
CSS box-model to remove padding from the 100% calculated height
so that the body is spaced from the edge of the window despite being 100% high. Resize the browser window and watch
how it adjusts.
The shadow is done using a CSS box-shadow. Only Firefox 3.5,
Chrome 5, Opera 10.50, Safari 5 and up support an inset shadow, so in Safari 4 you get a regular drop-shadow:
And remember, that’s a body element you’re looking at, no wrapper! So no more excuses. Stop using wrappers, and
especially don’t try and hide a wrapper behind HTML5 bling
by using a section, that’s wrong.