Problemas con un aside

JohnLaza · #1 (**permalink**) 24/04/2016, 12:54

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;
}

DesgraciadoGabo · #2 (**permalink**) 25/04/2016, 08:53

Son muy pequeños errores los que tienes:

Tu section tiene un 70% de ancho más un margin de 20% arriba, derecha, abajo y a la izquierda lo cual le da un bonito 110% de ancho rebasa incluso la medida de su contenedor.

Por otro lado el aside/#columna tiene un 20% lo cual esta bien pero ya no tiene espacio entonces de automático lo tira abajo, te recomiendo que le pongas float:right, te dejo el ejemplo de tu código ya trabajando:
https://jsfiddle.net/duj8b0oc/

Saludos!