JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<meta charset="utf-8">
<!-- 'container' -->
<body>
<!-- RECHTER BEREICH -->
<aside>
<nav>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
</aside>
<!-- HAUPTINHALTSBEREICH -->
<div id="wrap">
<img src="http://fra.jdav-wuerzburg.de/thumbs/2014-07-02_14-35-36_IMG_4233_php3zIRUd.png">
<section>
<h1>Überschrift</h1>
<article>
Ein Schöner Beitrag
</article>
<article>
Noch ein schöner beitrag
</article>
<article>
Und noch einer
</article>
<div class="clear"><!-- Floats stoppen --></div>
</section>
</div>
<div class="clear"><!-- Floats stoppen --></div>
<!-- FUSSBEREICH -->
<footer>
Der Fuß mit ©
</footer>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
/* padding & border werden nicht zu width dazu gezählt */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html{
background-color: rgba(0,0,0, .3);
}
body{
width: 100%;
max-width: 600px;
margin: auto;
}
a{
color: rgba(0,0,0, .7);
}
a:hover{
color: rgba(0,0,0, .7);
}
.clear{
clear: both;
}
aside, #wrap{
float: right;
}
aside{
width: 200px;
padding: 10px;
}
#wrap{
/* breite berechnet sich aus 100% - navigationsbereich */
width: calc(100% - 200px);
padding: 5px;
}
/* das logo */
#wrap>img{
height: 150px;
}
article{
padding: 5px;
float: left;
width: 50%;
/* zur verdeutlichung */
border: 1px solid rgba(0,0,0, .2);
}