Camen Design

c share + remix

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!)

Screenshot of the code above rendered

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>
Screenshot of the code above rendered, the window background and page is a light grey

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.

the window background is now orange, and the page is a light grey

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>
The page now extends from the top of the window to the bottom

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.

A page with lots of text, with the window scrolled down to show the text spilling over the edge of the page into the orange background

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.

The page now has a scrollbar, stopping the overspill

This even works in Internet Explorer 6 and above. That’s cute; now let’s do something advanced.

Screenshot of inset cut-out page with rounded corners, on an orange background

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:

As before, but not inset without the ‘cut-out’ effect, the shadow is to the bottom right instead as if the page is floating

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.