Ver Mensaje Individual
  #9 (permalink)  
Antiguo 14/11/2012, 03:19
Avatar de kahlito
kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 21 años, 1 mes
Puntos: 65
Respuesta: Alineando dos columnas con html5 y css3

Hola de nuevo.

Por ahora he conseguido arreglar el orden de elementos poniendo un div "contenedor" que englobe por un lado a section y por otro a ese aside que se descolocaba y parece que va bien.

Sin embargo la zona de noticias me sigue descolocando la segunda donde la imagen está a la izquierda pero el título y el párrafo no se colocan justo al lado, el párrafo siempre abajo.

http://jose-carlos.com/cubero/

Estoy intentando hacerlo todo sin float y solo con displine:inline-block como están la primera y tercera noticia donde todo va correctamente.

Aquí por ejemplo lo he puesto con float y queda bien, ¿pero como podría hacer esa segunda noticia sin float para que quedase igual?

http://jose-carlos.com/cubero/articulo-solo.html

Código HTML:
Ver original
  1. <section class="noticias">             
  2.             <h2>Alsoncubero</h2>
  3.             <article>
  4.                 <h3>Fiestas este fin de semana</h3>        
  5.                 <p class="noticia-izquierda">Este fin de semana viene cargado de fiestas y muuuuucha salsa.
  6.                 Empezaremos el viernes en DOWN CLUB
  7.                 23.30 horas con un taller de rueda de salsa.
  8.                 Animaciones, Salsa, Bachata y Mojitos fresquitos!!!
  9.                 Con una terraza espectacular, no dudes en venir!!!
  10.  
  11.                 **********************
  12.  
  13.                 Y los Domingos son de LA TERRAZA NIGTH & DAY</p>
  14.                 <img src="imagenes/img-noticia1.jpg" class="img-derecha">                              
  15.             </article>                 
  16.             <article>
  17.                
  18.                 <h3 class="n-derecha">Fiestas este fin de semana</h3>          
  19.                 <p class="n-derecha">Este fin de semana viene cargado de fiestas y muuuuucha salsa.
  20.                 Empezaremos el viernes en DOWN CLUB
  21.                 23.30 horas con un taller de rueda de salsa.
  22.                 Animaciones, Salsa, Bachata y Mojitos fresquitos!!!
  23.                 Con una terraza espectacular, no dudes en venir!!!
  24.  
  25.                 **********************
  26.  
  27.                 Y los Domingos son de LA TERRAZA NIGTH & DAY</p>   
  28.                 <img src="imagenes/img-noticia1.jpg" class="izquierda" class="n-izquierda">                                        
  29.             </article>
  30.             <article>
  31.                 <h3>Fiestas este fin de semana</h3>        
  32.                 <p class="noticia-izquierda">Este fin de semana viene cargado de fiestas y muuuuucha salsa.
  33.                 Empezaremos el viernes en DOWN CLUB
  34.                 23.30 horas con un taller de rueda de salsa.
  35.                 Animaciones, Salsa, Bachata y Mojitos fresquitos!!!
  36.                 Con una terraza espectacular, no dudes en venir!!!
  37.  
  38.                 **********************
  39.  
  40.                 Y los Domingos son de LA TERRAZA NIGTH & DAY</p>
  41.                 <img src="imagenes/img-noticia1.jpg" class="img-derecha">                              
  42.             </article>             
  43.         </section>

Código CSS:
Ver original
  1. article p, h3{
  2.     width: 60%;
  3.     display: inline-block;
  4.     vertical-align: top;
  5.     margin: 5px;
  6.     background-color: #444;
  7.     /*float: right;*/
  8. }
  9. article img{
  10.     display: inline-block;
  11.     margin: 5px;
  12.     border: 1px solid #fff;
  13.     /*float: left;*/
  14. }
  15. .n-derecha{
  16.     float: right;
  17. }
  18. .n-izquierda{
  19.     float: left;
  20. }

Saludos.