Buenas, me queda un espacio en blanco (grande)debajo de los elementos del div, cuyos elementos ocupan mucho menos (son texto).
Aca pueden ver como queda:
https://jsfiddle.net/qx0rL9r7/1/embedded/result/
Como pueden ver hay que hacer scroll para ir al final de la página. No entiendo porque se alarga tanto el div. Esperaba que el footer se quedara pegado al borde inferior de la ventana, visto que el div "main" tiene height: 100%, es decir que ocupe el espacio que quede dentro de su padre. Puede que sea un error tonto y no lo vea, gracias por la ayuda.
Código HTML:
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<!-- enlazamos pagina de estilos -->
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header id="header-principal" class="menu_bar">
<div id="logo" >
<a href="index.html" ><img id="img1" src="logo.png" ></img> </a>
</div>
<div class="container">
<nav>
<table align="center" width="80%">
<tr>
<td><a href="">enlace1</a></td>
<td><a href="">enlace2</a></td>
<td><a href="">enlace3</a></td>
<td><a href="">enlace4</a></td>
</tr>
</table>
</nav>
</div>
</header>
<div id="main">
<article id="articulo-uno">
<header class="articulo-header">
<h2>texto</h2>
</header>
<p class="articulo">textooooooooooooooooooooooooooooooooo
oooooooooooooooooooooooooooooooooooooooooo
oooooooooooooooooooooooooooooooooooooooooo</p>
</article>
<article id="articulo-dos">
<header class="articulo-header">
<h2>texto2</h2>
</header>
<p class="articulo">textooooooooooooooooooooooooooooooooooo
ooooooooooooooooooooooooooooooooooooooo
ooooooooooooooooooooooooooooooooooooooo2</p>
</article>
</div>
<footer >
<p>aqui el footer.</p>
</footer>
</body>
</html>
Código:
html{
width:100%;
height:100%;
margin:0px;
}
body{
margin:auto;
font-family:'Questrial';
height:100%;
width:100%;
}
#img1{
width:auto;
display:block;
z-index:1;
margin-right:auto;
margin-left: auto;
}
#logo{
height: 79px;
background: black url('fondo.png') repeat;
width:100%
}
nav {
width:100%;
background-color:#F6E3CE;
}
nav table{
height:60px;
padding-top:10px;
}
nav table tr td {
letter-spacing: 0.09em;
text-transform: uppercase;
margin-left:auto;
margin-right:auto;
}
nav table tr td a {
text-decoration:none;
color:black;
}
footer{
width:100%;
height:100px;
text-align:center;
background: grey url('fondo.png') repeat;
}
footer p {
position:relative;
padding: 2em 0em;
}
#main{
display:inline-flex;
width:100%;
height:100%;
}
#articulo-uno{
width:auto;
height:200px;
float:left;
margin-left:20%;
}
#articulo-dos{
width:auto;
height:200px;
float:right;
padding-left:20px;
margin-right:20%;
}