This is a document written using ReMarkable, a shorthand syntax for generating HTML.

{	"date"		:	201003312218,
	"updated"	:	201003312218,
	"licence"	:	"cc-by",
	"tags"		:	["web-dev", "code-is-art"]
}

<section>
# How to Centre and Layout Pages Without a Wrapper #

*The number one suggestion* I see from the <proprietor (//richclarkdesign.com/)> of <html5gallery.com> to submitters is not to use the {“``<section>``”|section} element as a glorified {“``<div id="wrapper">``”|DIV wrapper}. Here, I shall demonstrate that {“``<body>``”|the body element} 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:

~~~ HTML ~~~>
<!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" /&__HREF__;/example1_thumb.png>

Now let’s add a background colour.

~~~ HTML ~~~>
<!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"
 /&__HREF__;/example2_thumb.png>

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.

~~~ HTML ~~~>
<!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"
 /&__HREF__;/example3_thumb.png>

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.

~~~ HTML ~~~>
<!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"
 /&__HREF__;/example4_thumb.png>

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" /&__HREF__;/example5_thumb.png>

``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:

~~~ HTML ~~~>
<!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"
 /&__HREF__;/example6_thumb.png>

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"
 /&__HREF__;/example7_thumb.png>

<This page (/&__HREF__;/test.html)> uses <CSS box-model (//quirksmode.org/css/box.html)> 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 (//css3.info/preview/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" /&__HREF__;/example8_thumb.png>

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 (//html5doctor.com/the-section-element/)>.

</section>