Hola de nuevo.
He probado de varias maneras y parece que ahora va mejor, finalmente el aside va dentro de section ya que creo que forma parte de la sección de noticias o contenidos de la web como serán algunas imágenes. Sin embargo no queda arriba del bloque de la derecha, me queda justo debajo pegado al último article y debería de ir arriba como en la maqueta de ejemplo que puse:
http://jose-carlos.com/cubero/
Por otro lado la segunda noticia (segundo article) que lleva la imagen a la izquierda y la noticia a la derecha no logra adaptarse al diseño que quiero ya que el párrafo queda debajo de la imagen y debería de ir también como en la maqueta que puse arriba, justo a la derecha de la imagen.
El html y css que tengo en esa zona son estos:
Código HTML:
Ver original <figure class="imagen-encabezado"> <img src="imagenes/academia-alsoncubero.png" alt="Alsoncubero" title"Alsoncubero"> <h2><img src="imagenes/fondo-h1.png"></h2> <h3>Fiestas este fin de semana
</h3> <p class="noticia-izquierda">Este fin de semana viene cargado de fiestas y muuuuucha salsa.
Empezaremos el viernes en DOWN CLUB
23.30 horas con un taller de rueda de salsa.
Animaciones, Salsa, Bachata y Mojitos fresquitos!!!
Con una terraza espectacular, no dudes en venir!!!
**********************
Y los Domingos son de LA TERRAZA NIGTH & DAY</p>
<img src="imagenes/img-noticia1.jpg" class="img-derecha">
</article>
<article>
<img src="imagenes/img-noticia1.jpg" class="img-derecha">
<h3>Fiestas este fin de semana</h3>
<p class="noticia-derecha">Este fin de semana viene cargado de fiestas y muuuuucha salsa.
Empezaremos el viernes en DOWN CLUB
23.30 horas con un taller de rueda de salsa.
Animaciones, Salsa, Bachata y Mojitos fresquitos!!!
Con una terraza espectacular, no dudes en venir!!!
**********************
Y los Domingos son de LA TERRAZA NIGTH & DAY</p>
</article>
<article>
<h3>Fiestas este fin de semana</h3>
<p class="noticia-izquierda">Este fin de semana viene cargado de fiestas y muuuuucha salsa.
Empezaremos el viernes en DOWN CLUB
23.30 horas con un taller de rueda de salsa.
Animaciones, Salsa, Bachata y Mojitos fresquitos!!!
Con una terraza espectacular, no dudes en venir!!!
**********************
Y los Domingos son de LA TERRAZA NIGTH & DAY</p>
<img src="imagenes/img-noticia1.jpg" class="img-derecha">
</article>
<aside class="a-derecha">
<h4>Galería de imágenes</h4>
<p>El pasado El pasado jueves realizamos un taller de técnica de movimientos, especialmente para los brazos, aplicable a cualquier estilo de baile.</p>
<img src="imagenes/img-noticia1.jpg">
</aside>
</section>
Código CSS:
Ver original.contenedor, header{
width: 75%;
margin: 0 auto;
/*border: 1px solid #333; */
}
article{
width: 70%;
/*background-color: #c6c6c6;*/
display: inline-block;
vertical-align: top;
}
article p, h3{
width: 60%;
display: inline-block;
vertical-align: top;
margin: 5px;
}
article img{
display: inline-block;
margin: 5px;
border: 1px solid #fff;
}
aside{
width: 25%;
/*background-color: #ed6c22;*/
display: inline-block;
vertical-align: top;
border: 1px solid #ef762a;
}
h2{
color: #fec60f;
}
Sigo probando de todo ya que es mi primera web en html5, ¿alguna otra idea para arreglar eso? Gracias a todos por la ayuda.