Código HTML:
Ver original <div style="position: fixed; width: 100%;"> <div id="titulo">Logo aquí
</div> <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> <h1>Welcome to my webpage
</h1> <h2>Contenido principal y centra
</h2> <h2>Contenido de la columna
</h2> Todos los derechos reservados.
Código CSS:
Ver originalhtml, 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
{
position:fixed;
bottom: 0;
width: 100%;
font-family: 'Noto Sans', sans-serif;
background: #22272A;
color: #FFF;
text-align: center;
padding: 10px;
}
http://codepen.io/anon/pen/myzNdE
Ya.. pero hay que insistir ShadowHunter, no uses etiquetas que no existen, y en lo posible evita los estilos en linea que para eso esta CSS.
Busca en google hay muchas paginas que explican como organizar las etiquetas, te va a auydar en cuanto posicionamiento web, aparte de tener un trabajo mas limpio y ordenado.