Etwas gekürzt.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Seitenname</title>
<style>
* {
padding : 0;
margin : 0;
border: 0;
box-sizing: border-box;
}
#wrap {
width:90%;
margin:0 auto;
overflow:hidden;
background:#ddd;
}
#header {
background:#aaa;
padding:30px;
}
#topbar {
float:left;
width:100%;
background:#dad;
min-height:50px;
}
#sidebar {
width:30%;
min-height:400px;
float:left;
background:#daa;
}
#content {
width:70%;
float:left;
background:#aed;
}
#footer {
padding:20px;
background:#ada;
clear:both;
}
.col33 {
float:left;
width:33.334%;
background:#09c;
}
.col100 {
float:left;
width:100%;
background:#a33;
}
p {
margin:5px;
padding:5px;
background:#333;
color:#fff;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"><h1>Header</h1></div>
<div id="topbar"><p>Tobbar</p></div>
<div id="sidebar"><p>Sidebar</p></div>
<div id="content">
<div class="col33"><p>This is column 1</p></div>
<div class="col33"><p>This is column 2</p></div>
<div class="col33"><p>This is column 3</p></div>
<div class="col33"><p>This is column 1</p></div>
<div class="col33"><p>This is column 2</p></div>
<div class="col33"><p>This is column 3</p></div>
<div class="col33"><p>This is column 1</p></div>
<div class="col33"><p>This is column 2</p></div>
<div class="col33"><p>This is column 3</p></div>
<div class="col100"><p>Content</p></div>
</div>
<div id="footer"><p>Footer</p></div>
</div>
</body>
</html>Wobei Flexbox vielleicht besser wäre.
