CSS Layout fisso

<!doctype html>
<html lang="it"><head> <meta charset="utf-8">
<title>Layout fisso</title>
<!-- Ispirato da https://static.html.it/app/uploads/blog/layoutgala/index.html -->
<style>
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
div#header{position:relative}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:23px}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}

div#container{width:700px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 0 150px}
div#navigation{float:left;width:150px;margin-left:-150px}
div#extra{float:left;width:150px;margin-left:-700px}
div#footer{clear:left;width:100%}
</style>
</head>
<body>
<div id="container">
<div id="header"><h1>Intestazione</h1><a href="http://www.w3.org/html/logo/">
<img src="https://www.w3.org/html/logo/badge/html5-badge-h-css3-semantics.png" width="82" height="32" alt="HTML5 Logo" title="HTML5 Logo">
</a></div>
<div id="wrapper">
<div id="content">
<p><strong>1) CONTENUTO PRINCIPALE.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at suscipit lectus, aliquam fermentum tortor. Nulla nec interdum orci, sit amet semper urna. Pellentesque ultrices imperdiet interdum. Donec sed felis id diam finibus vehicula non et tellus. Sed semper sollicitudin quam vel cursus. Sed eleifend metus orci, eget consectetur dui vulputate eu. Nunc gravida vitae arcu rutrum pharetra. Suspendisse ullamcorper ac nisl rutrum blandit. Vestibulum varius nec lorem sit amet mattis. Aenean tempor lacus id volutpat ornare..</p>
<p>Cras ullamcorper leo tellus, vulputate eleifend erat efficitur sit amet. Nam sed vulputate tortor. Duis eros enim, fermentum at dui vitae, iaculis porta lectus. Vestibulum pharetra, erat et varius mattis, purus nibh fermentum erat, vitae scelerisque nunc mauris eu nisl. Vestibulum eget arcu in dui tincidunt tristique vitae sed velit. Curabitur elit augue, varius et lobortis eu, vestibulum et nisl. Morbi sed arcu eget purus pharetra vehicula. Etiam vitae lorem sed est vehicula porttitor. Donec quis ultrices ante. Maecenas maximus pretium sollicitudin. Proin rutrum felis magna, quis consequat eros rhoncus in. Nunc et interdum nulla, id scelerisque erat. Pellentesque consequat nisi et est ultricies, at dictum elit aliquam.</p>
<p>
Duis sem elit, laoreet eu turpis vel, facilisis rhoncus nibh. Sed aliquam ex maximus erat blandit porta. Mauris volutpat lacus felis, id laoreet ligula ornare non. Integer iaculis elit sem. Morbi non posuere lectus, rutrum placerat turpis. Fusce vitae erat sit amet eros pharetra ultricies. Maecenas dignissim nunc sed nisl dapibus rhoncus. Sed lacus nisi, ornare quis arcu eget, sollicitudin elementum mauris. Pellentesque at scelerisque lacus, sit amet suscipit ipsum. Morbi maximus turpis odio, nec dignissim mauris tempus at. Donec non pharetra ligula. Mauris vel egestas turpis.</p>
<p>Duis tristique vehicula porttitor. Aenean purus nulla, posuere placerat justo sit amet, mollis lacinia metus. Fusce nec rhoncus massa. Duis porttitor suscipit magna eget tempus. Aenean augue massa, pulvinar in metus id, egestas viverra neque. In hac habitasse platea dictumst. In vulputate viverra tortor, quis elementum velit faucibus a. Nam in odio nibh. Maecenas venenatis tempor ipsum pretium consectetur. Cras eu condimentum libero. Ut nec massa vel nisi posuere gravida at sed nulla. Mauris felis nulla, iaculis ac semper vel, auctor sed elit. Aenean felis turpis, mattis ut justo et, ultricies tempus sapien. Aenean dignissim diam in neque viverra, ut iaculis risus cursus. Sed lacinia sem at arcu efficitur malesuada. In a est quis nisl ornare mattis. </p>
</div>
</div>
<div id="navigation">
<p><strong>2) Navigazione.</strong></p> <ol>
<li><a href="">Lorem</a></li>
<li><a href="">Ipsum</a></li>
<li><a href="">Dolor</a></li>
<li><a href="">Sic</a></li>
<li><a href="">Amet</a></li>
</ol>
</div>
<div id="extra">
<p><strong>3) Altre info.</strong>
Nullam id ipsum dictum, facilisis elit sed, vehicula ante. Donec ornare felis sit amet urna pretium, quis aliquam turpis blandit. Ut tortor odio, consequat ut tincidunt ac, mattis eu nunc. Nunc mattis in augue a vulputate. Nullam laoreet, ante ac sodales pretium, ex enim ornare turpis, sed congue velit diam in dui. Nullam quis gravida tortor. . </p>
</div>
<div id="footer"><p>Piè di pagina. Torna all'<a href="index.html">indice</a>.</p></div>
</div>
</body></html>