El código es este: (el que modifique)
HTML
Código HTML:
<div id="contenedor">
<div style="position: fixed; width: 100%;">
<header>
<titulo>Logo aquí</titulo>
<nav>
<ul>
<li><a href="#" class="active">Inicio</a></li>
<li><a href="#">Seccion</a></li>
<li><a href="#">Seccion</a></li>
<li><a href="#">Seccion</a></li>
</ul>
</nav>
</header>
</div>
<contenido>
<div id="central">
<h1>Welcome to my webpage</h1>
<h2>Contenido principal y centra</h2>
</div>
<div id="columna">
<h1>Column</h1>
<h2>Contenido de la columna</h2>
</div>
</contenido>
<footer>
Todos los derechos reservados.
</footer>
</div>
CSS
Código:
@charset "utf-8";
html, body { margin: 0; padding: 0; }
#contenedor
{
margin: 0 auto;
background: #FFF;
width: 100%;
}
header
{
height: 100px;
padding: 1% 1%;
background-color: #22272A;
margin: 0 auto;
}
/*header a { text-decoration: none; }*/
titulo
{
color: #FFF;
margin: 0 auto;
position: absolute;
left: 20%;
top: 2%;
font-size: 48px;
font-family: 'Oswald', sans-serif;
}
nav
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
nav ul
{
width: 100%;
max-width: 512px;
margin: 0 auto;
}
nav ul li
{
list-style: none;
display: inline-block;
float: left;
padding: 10px;
text-align: center;
}
nav ul li .active
{
color: #3479FA;
background: #FFF;
border: 1px solid white;
border-radius: 5px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
padding: 10px;
}
nav ul li a
{
text-decoration: none;
color: #FFF;
width: 40px;
font-weight: bold;
font-family: 'Noto Sans', sans-serif;
}
nav ul li a:hover { color: #3479FA; }
contenido
{
padding-top:120px;
margin: 0 auto;
width: 61%;
height: 30%;
display: table;
overflow: scroll;
text-align: justify;
font-family: 'Noto Sans', sans-serif;
}
contenido div
{
display: table-cell;
vertical-align: top;
padding:20px;
}
contenido div:first-child
{
border-right: 1px dashed #999999;
}
#central { width: 80%; }
#columna { width: 20%; }
footer
{
bottom: 0;
width: 100%;
font-family: 'Noto Sans', sans-serif;
background: #22272A;
color: #FFF;
text-align: center;
padding: 10px;
}