Hallo,
du packst den blauen und den roten Container in einen gemeinsamen, noch einzufügenden, Container. Diesem neuen Container gibst du dann die gewünschte Breite.
Das könnte dann zum Beispiel so ausschauen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
<title>Layout 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Um alte IE HTML5-tauglich zu machen -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
<style>
/* Clearfix - für Float, falls erforderlich */
@media all {
main:before,
main:after,
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
main:after,
.clearfix:after {
clear: both;
}
}
@media all {
/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
padding: 0;
}
body>* {
padding: 0.5rem;
border: 3px solid silver;
}
main {
width: 2000px;
padding: 0;
}
main>* {
border: 3px solid yellow;
}
main>:nth-child(1) {
width: 20%;
float: left;
}
main>:nth-child(2) {
width: 80%;
float: left;
}
main>:nth-child(2)>:nth-child(1n) {
float: left;
border: 3px solid orange;
}
main>:nth-child(2)>:nth-child(1) {
width: 25%;
}
main>:nth-child(2)>:nth-child(1n+2) {
width: 15%;
}
</style>
</head>
<body>
<header>
<h1>Waldfrieden -- Tassilo Sturm </h1>
<h2>Rauminstallationen </h2>
</header>
<main>
<div id="sidebar_linkscontent">
<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et e</p>
</div>
<div class="main_contentframe">
<div id="main_content">
<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et e</p>
</div>
<div id="other_content">
<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et e</p>
</div>
<div id="another_content">
<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et e</p>
</div>
<div id="more_content">
<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et e</p>
</div>
<div id="muchmore_content">
<p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et e</p>
</div>
</div>
</main>
<footer class="contentinfo">
<nav class="footermenue">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">WORKS</a></li>
<li><a href="#">TEXT</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">KONTAKT & IMPRESSUM</a></li>
</ul>
</nav>
</footer>
</body>
</html>
Gruss
MrMurphy
