<!DOCTYPE html>
<html>
<head>
<style>
* {-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {background: #FEFEFE;
font: normal normal 100% sans-serif;
}
#container {
width: 100%;
border: 0;
}
#header, #footer, #menu {
margin: 0;
padding: 1em;
color: #000000;
clear: left;
text-align: left;
}
#menu {
background: #4CAF50;
font-size: 18px;
color: #FFFFFF;
}
#menu a {
text-decoration: none;
font-size: 18px;
color: #FFFFFF;
}
#nav {
float: left;
width: 220px;
margin: 0;
padding: 1em;
}
#nav ul {
list-style-type: none;
font-size: 18px;
padding: 0px;
width: 100%;
}
#nav ul li:hover {
list-style-type: none;
background: #D0D0D0;
padding: 0px;
width: 100%;
}
#nav a {
text-decoration: none;
padding: 0px;
color: #000000;
}
#nav ul a:hover {
text-decoration: none;
background: #D0D0D0;
padding: 0px;
}
#article {
margin-left: 170px;
border-left: 0;
padding: 1em;
overflow: hidden;
border-left: 4px solid #EFEFEF;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Titulo Site</h1>
<p align="right">Eslogan del Sitio</p>
</div>
<div id="menu">
<a href="#">MENU #1</a>
<a href="#">MENU #2</a>
<a href="#">MENU #3</a>
<a href="#">MENU #4</a>
</div>
<div id="nav">
<b>SECCION 1</b>
<ul>
<li><a href="#">Menu #1</a></li>
<li><a href="#">Menu #2</a></li>
<li><a href="#">Menu #3</a></li>
<li><a href="#">Menu #4</a></li>
</ul>
<b>SECCION 2</b>
<ul>
<li><a href="#">Menu #1</a></li>
<li><a href="#">Menu #2</a></li>
<li><a href="#">Menu #3</a></li>
<li><a href="#">Menu #4</a></li>
</ul>
</div>
<div id="article">
<h1>Contenidos</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse vulputate felis ut est. Vivamus congue. Nullam consequat. Etiam elit ipsum, pulvinar in, commodo sed, malesuada et, wisi. Maecenas nunc odio, interdum et, mollis eget, egestas quis, enim. Vestibulum augue leo, molestie ut, sollicitudin sit amet, ultricies eu, diam. Nam vel metus. Donec non ligula at augue dictum mollis. In tristique convallis erat. In pharetra, ligula vitae fringilla ultrices, turpis tellus scelerisque magna, vitae imperdiet nibh quam nec justo. Etiam diam purus, vestibulum id, placerat nec, varius et, augue. Maecenas vitae nulla et est iaculis scelerisque. Mauris tempus sagittis ligula. Nunc consectetuer sem vitae nisl. Praesent sit amet turpis. Sed rutrum blandit tellus. Suspendisse in enim. Ut vel mi.
</p>
</div>
<div id="footer">Copyright © 2017</div>
</div>
</body>
</html>
