<!DOCTYPE html>
<!-- ========================================== kroc camen of camen design ============================================= -->
<title>code · How to Centre and Layout Pages Without a Wrapper</title>
<link rel="stylesheet" type="text/css" href="/design/design.css" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no" />
<link rel="alternate" type="application/rss+xml" href="/code/rss" title="Just code" />
<link rel="canonical" href="/code/developpeurs_sans_frontieres" />
<!-- =================================================================================================================== -->
<header>
	<h1><a href="/" rel="index">
		Camen Design
	</a></h1>
	<nav><ul>
		<li><a href="/">all</a></li>
		<li><a href="/projects">projects</a></li>
		<li><a href="http://forum.camendesign.com">forum</a></li>
	</ul><ul>
		<li><a href="/quote/">quote</a></li>
		<li><a href="/writing/">writing</a></li>
		<li><a href="/blog/">blog</a></li>
		<li><a href="/photo/">photo</a></li>
		<li><a href="/code/" rel="tag">code</a></li>
		<li><a href="/art/">art</a></li>
		<li><a href="/link/">link</a></li>
		<li><a href="/poem/">poem</a></li>
		<li><a href="/audio/">audio</a></li>
	</ul><ul>
		<li><a href="/web-dev/">web-dev</a></li>
		<li><a href="/annoyances/">annoyances</a></li>
		<li><a href="/eve/">eve</a></li>
		<li><a href="/code-is-art/">code-is-art</a></li>
		<li><a href="/inspiration/">inspiration</a></li>
		<li><a href="/windows/">windows</a></li>
		<li><a href="/gift/">gift</a></li>
		<li><a href="/gaming/">gaming</a></li>
		<li><a href="/mac/">mac</a></li>
		<li><a href="/osnews/">osnews</a></li>
		<li><a href="/c64/">c64</a></li>
		<li><a href="/linux/">linux</a></li>
	</ul>
	<a rel="previous" href="/code/end_of_vfe">
		older article →
	</a><a rel="next" href="/code/website_optimisation_measures">
		← newer article
	</a></nav>
</header>
<!-- =================================================================================================================== -->
<article><header>
	<!-- date published or updated -->
	<time pubdate datetime="2010-03-31T22:18:00+01:00">
		<sup>10:18<abbr>pm</abbr> • 2010</sup>
		<abbr title="March">Mar</abbr> 31
	</time>
	<!-- categories -->
	<ul>
		<li><a href="/code/developpeurs_sans_frontieres" rel="bookmark tag">code</a></li>
		<li><a href="/web-dev/developpeurs_sans_frontieres">web-dev</a></li>
		<li><a href="/code-is-art/developpeurs_sans_frontieres">code-is-art</a></li>
	</ul>
	<!-- licence -->
	<small>
		<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_GB">c</a>
		share + remix
	</small>
</header>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<section>
<h1>How to Centre and Layout Pages Without a Wrapper</h1>
<p>
	<strong>The number one suggestion</strong> I see from the
	<a href="http://richclarkdesign.com/" rel="external">proprietor</a> of
	<a href="http://html5gallery.com" rel="external">html5gallery.com</a> to submitters is not to use the
	<abbr title="section">“<code>&lt;section&gt;</code>”</abbr> element as a glorified
	<abbr title="DIV wrapper">“<code>&lt;div id="wrapper"&gt;</code>”</abbr>. Here, I shall demonstrate that
	<abbr title="the body element">“<code>&lt;body&gt;</code>”</abbr> is already a wrapper and can be hacked to
	achieve some pretty remarkable layout and clean code!
</p><p>
	Let me just repeat that. <em>The body element is already a wrapper</em>. It can have a height, width, border,
	drop-shadow; you name it. Take for example, this markup:
</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;style&gt;
	body	{width: 600px; margin: 20px auto; /* center */ padding: 20px;
		 border: 1px solid black;}
&lt;/style&gt;
&lt;body&gt;
	The Quick Brown Fox.
&lt;/body&gt;</code></pre>

<p>
	<small>(Note that <code>&lt;html&gt;</code>, <code>&lt;head&gt;</code> and even <code>&lt;body&gt;</code> are
	optional in HTML!)</small>
</p>
<img src="/code/developpeurs_sans_frontieres/example1_thumb.png" alt="Screenshot of the code above rendered" width="640" height="322" />
<p>
	Now let’s add a background colour.
</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;style&gt;
	body	{width: 600px; margin: 20px auto; /* center */ padding: 20px;
		 border: 1px solid black;
		 background: #eee;}
&lt;/style&gt;
&lt;body&gt;
	The Quick Brown Fox.
&lt;/body&gt;</code></pre>

<img src="/code/developpeurs_sans_frontieres/example2_thumb.png" alt="Screenshot of the code above rendered, the window background and page is a light grey" width="640" height="322" />
<p>
	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.
</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;style&gt;
	html	{background: #c72;}
	body	{width: 600px; margin: 20px auto; /* center */ padding: 20px;
		 border: 1px solid black;
		 background: #eee;}
&lt;/style&gt;
&lt;body&gt;
	The Quick Brown Fox.
&lt;/body&gt;</code></pre>

<p>
	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 <code>&lt;html&gt;</code>, and one on <code>&lt;body&gt;</code>, 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.
</p>
<img src="/code/developpeurs_sans_frontieres/example3_thumb.png" alt="the window background is now orange, and the page is a light grey" width="640" height="322" />
<p>
	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.
</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;style&gt;
	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;}
&lt;/style&gt;
&lt;body&gt;
	The Quick Brown Fox.
&lt;/body&gt;</code></pre>

<img src="/code/developpeurs_sans_frontieres/example4_thumb.png" alt="The page now extends from the top of the window to the bottom" width="640" height="322" />
<p>
	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 <em>also</em> 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.
</p><p>
	We use <q><code>min-height: 100%;</code></q> because in browsers other than Internet Explorer, content that is
	longer than the fixed height of an element just spills over the edge.
</p>
<img src="/code/developpeurs_sans_frontieres/example5_thumb.png" alt="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" width="640" height="322" />
<p>
	<code>min-height</code> ensures that the body is <em>at least 100% high, but expands for content longer than
	that</em>. We could of course use the <code>overflow</code> property with a body that is fixed to a height of 100%
	for a neat hack:
</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;style&gt;
	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;}
&lt;/style&gt;
&lt;body&gt;
	Lorem ipsum dolor sit amet, … anim id est laborum.
&lt;/body&gt;</code></pre>

<p>
	Setting <code>overflow</code> to <code>hidden</code> on the HTML element removes the scrollbar from the window.
	Setting <code>overflow</code> to <code>auto</code> on the body, then gives it a scrollbar because its height is
	fixed to 100% and the content is taller than the window.
</p>
<img src="/code/developpeurs_sans_frontieres/example6_thumb.png" alt="The page now has a scrollbar, stopping the overspill" width="640" height="322" />
<p>
	This even works in Internet Explorer 6 and above. That’s cute; now let’s do something advanced.
</p>
<img src="/code/developpeurs_sans_frontieres/example7_thumb.png" alt="Screenshot of inset cut-out page with rounded corners, on an orange background" width="640" height="512" />
<p>
	<a href="/code/developpeurs_sans_frontieres/test.html">This page</a> uses
	<a href="http://quirksmode.org/css/box.html" rel="external">CSS box-model</a> 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.
</p><p>
	The shadow is done using a <a href="http://css3.info/preview/box-shadow/" rel="external">CSS box-shadow</a>. 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:
</p>
<img src="/code/developpeurs_sans_frontieres/example8_thumb.png" alt="As before, but not inset without the ‘cut-out’ effect, the shadow is to the bottom right instead as if the page is floating" width="640" height="514" />
<p>
	And remember, that’s a body element you’re looking at, no wrapper! So no more excuses. Stop using wrappers, and
	especially <a href="http://html5doctor.com/the-section-element/" rel="external">don’t try and hide a wrapper
	behind HTML5 bling by using a section, that’s wrong</a>.
</p>
</section>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
</article>
<footer>
	<nav><a href="http://forum.camendesign.com">‹ Discuss this in the Forum ›</a></nav>
		
	<a href="mailto:kroc@camendesign.com">kroc@camendesign.com</a>
	<nav>view-source:
		<a href="/code/developpeurs_sans_frontieres.rem">Rem</a> •
		<a href="/code/developpeurs_sans_frontieres.html">HTML</a> •
		<a href="/design/">CSS</a> •
		<a href="/.system/">PHP</a> •
		<a href="/.htaccess">.htaccess</a>
	</nav>
	<form method="get" action="https://duckduckgo.com">
		<input type="hidden" name="sites" value="camendesign.com" />
		<input type="search" name="q" placeholder="search…" />
		<input type="submit" value="Go" />
	</form>
</footer>
<!-- =================================================================================================== code is art === -->