Estoy leyendo un libro sobre
HTML5 pero me he colgado en algo que seguro es un pequeño detalle, es que el <aside> no se me coloca al lado derecho de <section>, pero no lo hace, se queda debajo de <section> como si no le quedara espacio para poder acomodarse,he intentado probado varias cosas pero nada. Espero puedan ayudarme por favor.
aquí el HTML
Código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1"/>
<meta name="description" content="Ejmeplo de HTML5"/>
<meta name="keywords" content="HTML5, CSS3, JavaScript"/>
<title>Titulo del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<div id=agrupar>
<header id=cabecera>
<h1>Este es el titulo principal del sitio web</h1>
</header>
<nav id=menu>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<sention id=seccion>
<article>
<header>
<hgroup>
<h1>Titulo del primer mensaje</h1>
<h2>Subtitulo del mensaje uno</h2>
</hgroup>
<time datetime="2013-10-12T12:10:45" pubdate>publicado 12-10-2013</time>
</header>
<p class=mitexto1>Este es el texto de mi primer mensaje</p>
<figure>
<img src=http://minkbooks.com/content/myimage.jpg>
<figcaption>
Esta es la imagen del primer mensaje
</figcaption>
</figure>
<footer>
<p>comentarios (0)</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Titulo de mi segundo mensaje</h1>
<h2>subtitulo del segundo mensaje</h2>
</hgroup>
<time datetime="2013-10-12T12:10:45" pubdate>publicado 12-10-2013</time>
</header>
Este es mi segundo articulo!!!
<footer>
<p>comentarios (0)</p>
</footer>
</article>
</section>
<aside id=columna>
<blockquote>I am Geek</blockquote>
</aside>
<footer id=pie>
<small>Copy-Left; 2013</small>
</footer>
</div>
</body>
</html>
Aquí el CSS:
Código:
* {
margin: 0px;
padding: 0px;
}
h1 {
font: bold 20px verdana, sans-serif;
}
h2 {
font: bold 14px verdana, sans-serif;
}
header, section, footer, aside, nav, article,
hgroup{
display: block;
}
body {
text-align: center;
}
#agrupar {
width: 960px;
margin: 15px auto;
text-align: left;
}
#cabecera {
background: #FFFBB9;
border: 1px solid #999999;
padding: 20px;
}
#menu {
background: #CCCCCC;
padding: 5px 15px;
}
#menu li {
display: inline-block;
list-style: none;
padding: 5px;
font: bold 14px verdana, sans-serif;
}
#seccion {
float: left;
width: 660px;
margin: 20px;
}
#columna {
float: left;
width: 220px;
margin: 20px 0px;
padding: 20px;
background: #CCCCCC;
}
#pie {
clear: both;
text-align: center;
padding: 20px;
border-top: 2px solid #999999;
}
article {
background: #FFFBCC;
border: 1px solid #999999;
padding: 20px;
margin-bottom: 15px;
}
article footer {
text-align: right;
}
time {
color: #999999;
}
figcaption {
font: italic 14px verdana, sans-serif;
}
Espero sus respuestas jeje
