Edit in JSFiddle

*
	{
		margin:0;
		padding:0;
	}
	body
	{
		min-width:960px;
	}
	#indice, #derecha
	{
		float: left;
	}
	#indice
	{
		background-color: blue;
		width: 20%;
	}
	#derecha
	{
		background-color: pink;
		width: 80%;
	}
	#titulo
	{
		margin-bottom:20px;
	}

<section id="indice">
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" width="128" height="128"/>

<h1>Indice del Elementos</h1>

<ol>
	<li>!Doctype</li>
	<li>&lt;a&gt;</li>
	<li>&lt;area&gt;</li>
	<li>&lt;aside&gt;</li>
</ol>
</section>


<div id="derecha">
<header id="titulo">
<h2>HTML5 PARA VENCER</h2>
<p>Escrito por: <a href="">Nombre completo</a></p>
</header>


<article id="contenido">
<h1>Elemento aside</h1>

<section>
	<h1>Descripcion</h1>
	<p>texto texto texto texto</p>
</section>

<section>
	<h1>Cuando/Como debo usarlo?</h1>
	<p>texto texto texto texto</p>
</section>

<section>
	<h1>Ejemplo(s)</h1>
	<p>texto texto texto texto</p>
</section>

<section>
	<h1>Lo que dice la W3C</h1>
	<p>texto texto texto texto</p>
</section>
</article>
</div>