Las noticias no tienen un alto fijo, solo un ancho, por eso es mi problema.
La primera línea contendrá dos noticias (la primera más grande será como dos pequeñas) y el resto de líneas van a tener 3.
Adjunto código:
Código:
<div id="col_izquierda">
<!-- FILA 1 // Noticias -->
<div class="noticia_g">
NOTICIA 1
</div>
<div class="noticia_p2">
NOTICIA 2
</div>
<!-- FILA 2 // Noticias -->
<div class="noticia_p">
NOTICIA 3
</div>
<div class="noticia_p2">
NOTICIA 4
</div>
<div class="noticia_p2">
NOTICIA 5
</div>
</div>
Código:
#col_izquierda{
background-color:#F0F0F2;
width: 690px;
float:left;
margin: 2px;
height: 100%;
border: 0px;
}
.noticia_p{
width:200px;
height:100%;
margin:5px 5px 5px 5px;
padding: 5px;
background-color:#E6E6E6;
border: 1px solid #5D6588;
float:left;
display: inline-block;
}
.noticia_p2{
width:200px;
margin:5px 5px 5px 5px;
padding: 5px;
background-color:#E6E6E6;
border: 1px solid #5D6588;
display: inline-block;
}
.noticia_g{
width:438px;
height:100%;
margin:5px 5px 5px 5px;
padding: 5px;
background-color:#E6E6E6;
border: 1px solid #5D6588;
float: left;
display: inline-block;
}
Actualmente sale:
Lo que realmente quiero es:
Es decir que se adapten todas las noticias hacia arriba.