Alineando dos columnas con html5 y css3

[kahlito]

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:

<section class="contenedor">
        <h2>Al.....</h2>        
        <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>
        <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:

.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.

[memoadian]

no le estás metiendo algún padding tanto a section contenedor como a aside?

por que aunque si usas 25% y 75% = 100%

si le agregas aunque sea un pixel de padding aumenta el ancho

recuerda que el ancho es padding + margin + border + width

yo creo que a lo mejor ahí está el problema.

[kahlito]

Gracias memoadian. La verdad es que no he puesto ninguno, he probado incluso bajando los porcentajes de cada a 65% o a 20% y con un padding a 0 y todo sigue igual.

Si lo hago con <div id="contenedor">como lo hacía antes de html 5 creo que puede entrar pero claro no se si es una buena manera ahora en html5.

¿Alguna otra recomendación? saludos.

[memoadian]

les haz puesto la propiedad float a los divs?

float:left y float:right

[hackjose]

Si aside y section son tipo block hay que usar float: left;

Si no quieres usar float, puedes usar display: inline-block si usas esta ultima acuerdate de usar bien los porcentajes, por que si usas espacio de mas en aside se va ir abajo.

Si no te funcionan los 2, vas a tener que meter todo en un div y para usar algo de html5

El div le pones display: box;

y usas la propiedades box-align, box-sizing y demas

Saludos

[pzin]

Iniciado por hackjose

Si aside y section son tipo block hay que usar float: left;

Todo lo flotado se convierte en elemento de bloque. A menos que vayas a la playa, que ahí es al revés, sino flotas y no sabes nadar te hundes como un bloque

[hackjose]

Iniciado por Bonez

Todo lo flotado se convierte en elemento de bloque. A menos que vayas a la playa, que ahí es al revés, sino flotas y no sabes nadar te hundes como un bloque

Muchas gracias por la informacion, no sabia que lo flotado se convierte en bloque

[kahlito]

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:

<section class="contenedor">
        <figure class="imagen-encabezado">
            <img src="imagenes/academia-alsoncubero.png" alt="Alsoncubero" title"Alsoncubero">
        </figure>       
        <h2><img src="imagenes/fondo-h1.png"></h2>      
        <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>
        <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:

.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.

[kahlito]

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:

<section class="noticias">              
            <h2>Alsoncubero</h2>
            <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>                  
            <article>
                
                <h3 class="n-derecha">Fiestas este fin de semana</h3>           
                <p class="n-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>    
                <img src="imagenes/img-noticia1.jpg" class="izquierda" class="n-izquierda">                                         
            </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>
 

Código CSS:

article p, h3{
    width: 60%;
    display: inline-block;
    vertical-align: top;
    margin: 5px;
    background-color: #444; 
    /*float: right;*/
}
article img{
    display: inline-block;
    margin: 5px;
    border: 1px solid #fff;
    /*float: left;*/
}
.n-derecha{
    float: right;
}
.n-izquierda{
    float: left;
}
 

Saludos.

[kahlito]

Hola de nuevo.

Sigo haciendo pruebas pero no logro el resultado deseado.

En el primer enlace general he puesto por ahora los float en el segundo artículo y todo va bien:

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

De todas formas intento hacer eso mismo pero sin float, así que he vuelto a probar en un ejemplo aparte y sigue sin colocarse como en el anterior enlace:

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

Como decía en mis anteriores mensajes la idea es de hacer eso mismo pero sin los floats que tengo en el segundo artículo, lo he intentado con display:inline-block y alguna que otra manera.

Código HTML:

<div class="contenedor">
        
            <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>                              
            <article>
                <img src="imagenes/img-noticia1.jpg" class="izquierda" class="n-izquierda">                         
                <h3 class="n-derecha">Fiestas este fin de semana</h3>                           
                <p class="n-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>              
            
    </div>
 

Código CSS:

*{
    border:0;
    margin: 0;
    padding: 0;
}
 
article{    
    border: 1px solid #fff; 
    background-color: #ff7700;
    width: 75%; 
    padding: 5px;   
}
article p, h3{
    width: 50%;
    display: inline-block;  
    border: 1px solid red;
}
article img{
    width: 20%;
    display: inline-block;  
    border: 1px solid #fff; 
}
/*.n-derecha{
    float: right;
}
.n-izquierda{
    float: left;
}*/
.contenedor, header{
    width: 75%;
    margin: 0 auto;
    background-color:#ff6529;
    border: 1px solid #333; 
}
 

¿Hay alguna otra posibilidad de hacerlo sin float?

[C2am]

Me parece que primero deberías pensar que estas buscando exactamente:
TITULO
IMAGEN TEXTO

TITULO
TEXTO IMAGEN

TITULO
IMAGEN TEXTO
Que según interpreto es la idea, y fijate muy bien el orden.

Entonces:
1- Sí el Titulo se posiciona por sobre [ imagen + texto ], entonces para qué convertirlo en inline-block, por qué no dejarlo como bloque y que ocupe su lugar natural. Luego, para que quede en línea con el texto, aplicamos un margin-left igual o un poquito superior al ancho que ocupará la imagen, para el que esté a la derecha.

Código CSS:

article h3{font-size:2em;}
 
article h3.derecha{margin-left:21%;}
 

2- aceptado 1, entonces queda posicionar la imagen y el texto según lo que buscas:

Caso 1:

Código HTML:

<article>
                <h3>Fiestas este fin de semana</h3>         
                <p class="noticia-izquierda"> bla bla </p>
                <img src="imagenes/img-noticia1.jpg" class="img-derecha" />                               
    </article>
 

Caso 2:

Código HTML:

<article>
                <h3>Fiestas este fin de semana</h3>                         
                <img src="imagenes/img-noticia1.jpg" class="img-derecha" />
                <p class="noticia-izquierda"> bla bla </p>                               
    </article>
 

Ahora para acomodar todo:
Como quieres usar display:inline-block y no float, entonces debes convertir los elementos de bloque a esa nueva realidad, y como img ya es inline, solo queda aplicarle esta propiedad a <p></p>

Código CSS:

article p{
    width: 50%;
    display: inline-block;  
    border: 1px solid red;
    vertical-align:middle;
}
 
article img{
    width: 20%;
    border: 1px solid #fff;
   vertical-align:middle;
}
 

Fijate que si no defines la alineación vertical no quedará muy bien, así que debes definirla con vertical-align, en este caso la centre verticalmente con middle.

3- Como la imagen y el <p> (transformado en inline-block), sus anchos (recuerda sumar width, margenes, padding, border) son iguales o menores al 100% se posicionarán uno al lado del otro, tal como lo harían los elementos inline.


Aquí el ejemplo

No veo, cual es el problema de usar float, y para mí es más sencillo modificar una clase css que estar tocando el marcado html, claro usando también php. Pero bue, son formas de hacer lo mismo.

Ahora, también podrías investigar lo nuevo de css3, como flexible box, etc.
http://ksesocss.blogspot.com/2012/11...te-futuro.html

Saludos

[destinopolinesia]

esta majete tu sitio, consejos: los iconos de sociales de abajo hazlos mas pequegnos y aplicales una opacity en normal del 95 y del 1 en Hover o viceversa, el contenido del aside esta alineado a la izda resuelvelo o con el text-align:centre o con el margin 0px auto .. tampoco estaria mas que buscaras alguna forma de diferenciar el div de los articulos del aside parecen fundirse en uno dada la falta de linea o motivo divisorio, el texto blanco del footer pegalo a la parte de abajo del footer no a la de arriba .. si te salo algo nos dices

[kahlito]

Hola de nuevo.

C2am, muchas gracias por tu explicación y ejemplo, lo he aplicado y por fin sale correctamente. Desde ya le echo también un vistazo al enlace de cajas.

destinopolinesia en realidad ahi se ve la web a un 90% , me falta definir algunos detalles del diseño como los que citas y de alguna que otra cosa, aun así me sirve de mucho tus consejos, gracias.

Asunto resuelto, gracias a todos, saludos.