Hola.
Estoy intentando hacer mi primera web en html5 y css3, donde por ejemplo en la zona de contenidos tengo una sección de tres artículos y a la derecha una zona con anuncios de imágenes o cualquier otra cosa de la web.:
Lo tengo estructurado asi, todo esto debajo de un header centrado:
Código HTML:
Ver original <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-izquierda">
<h3>Taller de técnica</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>
</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>
</section>
<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>
Y la idea es que quede así:
El css que uso es este:
Código CSS:
Ver original.contenedor{
width: 75%;
margin: 0 auto;
}
article{
width: 70%;
background-color: #c6c6c6;
display: inline-block;
vertical-align: top;
/*background-color: transparent;*/
}
aside.a-derecha{
width: 25%;
background-color: #333;
text-align: center;
display: inline-block;
vertical-align: top;
}
Sin embargo la zona de la derecha del aside queda siempre debajo, ¿tengo que crear un contenedor con los antiguos div para meterlo todo dentro y asi quede pegado arriba a la derecha o ahora con html5 hay alguna otra manera mejor?
Saludos.