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:
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="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:
Ver original*{
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?
