Tengo un problema a la hora de realizar el diseño clásico de un blog. Quiero colocar un section a la izquierda que es donde irán los articulo y un aside a la derecha para hacer un pequeño menú donde introducir otros temas de interés. Pero no se porque aside y la section no se coloca una a la izquierda y el otro a la derecha y no consigo saber porque. El código que tengo html es el siguiente:
Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Titulo de pa pagina</title>
<meta charset="UTF-8 sin BOM"/>
<meta name="description" content="Descripcion de la pagina"/>
<meta name="keywords" content="Palabras clave"/>
<link rel="stylesheet" href="css/misestilos.css">
</head>
<body>
<div id="agrupar">
<header id="cabecera">
<h1>Titulo principal de la web</h1>
</header>
<nav id="menu">
<ul>
<li>Inicio</li>
<li>fotos</li>
<li>contacto</li>
</ul>
</nav>
<section id="seccion">
<article>
<header>
<hgroup>
<h1>Titulo del articulo</h1>
<h2>Subtitulo del articulo</h2>
</hgroup>
<time datetime="10-12-2016" pubdate>publicado 10-11-2016</time>
</header>
Texto del primer articulo
<figure>
<img src="">
<figcaption>
Imagen primer articulo
</figcaption>
</figure>
<footer>
<p>Comentarios</p>
</footer>
</article>
<header>
<hgroup>
<h1>Titulo del articulo</h1>
<h2>Subtitulo del articulo</h2>
</hgroup>
<time datetime="10-12-2016" pubdate>publicado 10-11-2016</time>
</header>
Texto del segundo articulo
<figure>
<img src="">
<figcaption>
Imagen segundo articulo
</figcaption>
</figure>
<footer>
<p>Comentarios</p>
</footer>
<article>
<header>
</section>
<aside id="columna">
<blockquote>Mensaje numero uno</blockquote>
<blockquote>Mensaje numero dos</blockquote>
</aside>
<footer id="pie">
Esto es el pie de pagina
</footer >
</div>
</body>
</html>
y el css es el siguiente:
Código CSS:
Ver original/*Etiquetas generales*/
* {
margin: 0pX;
padding: 0px;
}
body{
test-align:center;
}
header,section,footer,aside,nav,article,figure,figcaption,hgroup{
display: block; /* Hacemos que todas nuestras secciones se traten como bloques*/
}
#agrupar {
width: 90%; /*Ancho del contenedor*/
margin:15px auto;/*auto=margen superior e inferior */
text-align: left;
}
h1{
font: bold 20px verdama, san-serif;
}
h2{
font: bold 14px verdana, sans-serif;
}
/* ESTILO DE LA CABECERA */
#cabecera {
background: #FFFBB9;
border: 1px solid #999999;
}
/* ESTILO DEL NAVEGADOR */
#menu {
padding: 5px 15px;
}
#menu li{
display: inline-block; /* Hace que coloquemos los elementos de la lista en linea*/
list-style: none;
padding: 5px;
border: 1px solid #999999;
font: bold 14px verdana, sans-serif;
}
/* ESTILO DE LA SECCION DE ARTICULOS */
#seccion {
width:70%;
margin: 20%;
float: left;
}
/*ESTILO DEL ASIDE*/
#columna{
width: 20%;
margin: 10px 0px;
float: left;
padding: 20px;
background: #CCCCCC;
}
/*ESTILO DEL PIE DE PAGINA*/
#pie{
clear: both;
background: #CCCCCC;
text-align: center;
padding: 20px;
border-top: 2px solid #999999;
}
/* ESTILO DE LOS ARTICULOS */
article{
background: #FFFBC;
border: 1px solid #999999;
padding: 20px;
margin-bottom: 15px;
}
article footer{
text-align:right;
}
time{
color:#999999;
}
figcaption{
font: italic 14px verdana, sans-serif;
}