Demonstrate two column CSS table layout.

fiddle.css

nav {
	display: table-cell;
	padding-right: 5px;
	background: yellow;
	white-space: nowrap; /* Prevent nav from ever inserting line breaks between words (like before "(p)"). */
}

#content {
	display: table-cell;
	padding-left: 5px;
	width: 100%; /* Because of table layout, this will shrink nav to the smallest width its content can handle (similarly to how float widths work). */
}

header {
	background: blue;
}

#main {
	display: table;
	width: 100%;
}

footer {
	background: #ccc;
}

fiddle.html

<header>
	Head
</header>

<div id="main">
    <nav id="main_nav">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/contact">Contact (p)</a></li> 
            <li><a href="/temp">Temp</a></li>   
        </ul>
    </nav>
    
    <div id="content" class="clearfix">
        <h1>Test</h1>
        <h2>A</h2><h2>C</h2><h2>D</h2>
    </div>
</div>

<footer>
	<p>[Copyright bumf]</p>
</footer>

http://stackoverflow.com/a/16599245/3625