Hallo,
ich habe mal ein dreispaltiges Layout erstellt. Außer den Farben ich habe ich alles weggelassen, was für das Layout unwichtig ist. Die Farben sind auch nur Beispielfarben zur Unterscheidung der einzelnen Elemente.
Bilder konnte ich nicht berücksichtigen, da du die nicht zur Verfügung gestellt hast und ich deshalb deren Größe nicht kenne.
Die Art des Layouts mit floats ist zwar veraltet, aber mit moderneren Lösungen wie dem Flexsbox-Modell bist du wahrscheinlich überfordert.
Dafür ist das Layout ausbaufähig, falls du zukünftig doch auf eine modernere Lösung umsteigen möchtest.
Den Hauptinhalt habe ich im Quelltext wie in deiner Vorlage vor die beiden seitlichen Container gestellt.
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Drei-Spalten-Layout 01</title>
<style>
* {
box-sizing: border-box;
}
html {
background-color: white;
font-size: 100%;
}
body {
background-color: yellow;
width: 90%;
min-width: 1000px;
padding: 0;
border: 1px solid black;
margin: 0 auto;
}
a {
text-decoration: none;
color: black;
outline: none;
}
header {
width: 100%;
border-top: 1px solid yellow;
}
header h2 {
background-color: white;
text-align: center;
padding-top: 50px;
margin: 32px 32px 0 32px;
}
nav {
background-color: blue;
text-align: right;
width: 100%;
padding: 0 32px;
}
nav a {
color: white;
display: inline-block;
margin: 0 8px;
}
nav a:first-child {
margin-right: 32px;
}
main {
background-color: green;
display: block;
width: 50%;
float: left;
padding: 8px;
margin-left: 25%;
margin-right: -75%;
}
section {
background-color: brown;
width: 25%;
float: left;
padding: 8px;
}
aside {
background-color: orange;
width: 25%;
float: right;
padding: 8px;
}
footer {
color: white;
background-color: blue;
width: 100%;
clear: both;
}
footer h2 {
margin: 0;
}
</style>
</head>
<body>
<header>
<h2>Schöpfer deiner Welt</h2>
</header>
<nav>
<a href="#">Blog</a>
<a href="#">Home</a>
<a href="#">Buch kaufen</a>
<a href="#">Lesung</a>
<a href="#">Kontakt</a>
<a href="#">Autorin</a>
</nav>
<main>
<h2>Buch bestellen</h2>
<a href="#">Zur Buchbestellung</a>
</main>
<section>
<h2>Buchbestellung</h2>
<p>Lieber Kunde und Leser, falls Sie keine Probleme haben, diesen Blindtext schnell und zügig zu lesen, können Sie sich glücklich schätzen.</p>
</section>
<aside>
<p>Nebeninformationen</p>
<p>Der verantwortliche Art Director, der Ihnen höchstwahrscheinlich gerade diesen Entwurf präsentiert, versteht sein typografisches Handwerk par excellence.</p>
</aside>
<footer>
<h2>footer</h2>
</footer>
</body>
</html>
Gruss
MrMurphy