Hola buenas, tengo un problema con un listado que estoy haciendo para una web con Drupal.
El listado esta dentro de un div y junto a este div tengo otros dos divs que contienen una imagen, en total son 3 divs que se muestran en linea. El problema esta en cuando el listado no tienen suficientes elementos dentro <li>, el div del listado cambia de posicion y se pone un poco por debajo de donde debería estar, pero si contiene los suficientes <li> para rellenear el height total de div que lo contiene se alinea con los otros divs, he probado a poner min-height pero nada, no se soluciona.
Os dejo el codigo por si veis algo raro.
Aparecen en este orden
.region-home-first-area-1 #block-block-12 -> div contiene listado
.region-home-first-area-1 #block-block-13 -> div contiene imagen 1
.region-home-first-area-1 #block-block-14 -> div contiene imagen 2
Código:
/* REGION AREA 1 */
.region-home-first-area-1 {
background: #fff;
width: 100% !important;
text-align: center;
padding: 20px 20px;
}
.region-home-first-area-1 > div {
display: inline-block;
}
.region-home-first-area-1 a {
text-decoration: none;
}
#noticias-home {
border: 1px solid #0B3B0B;
width: 309px;
height: 229px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 20px;
-webkit-border-radius: 20px; /* Safari */
-moz-border-radius: 20px; /* Firefox */
}
#noticias-home h2 {
color: white;
background: url('images/home_title.png') repeat-x;
height:35px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
ul.notice-list {
height:180px;
min-height: 180px;
text-align: left;
list-style: none;
margin: 0;
padding: 0 10px;
}
ul.notice-list li {
padding-bottom: 5px;
margin: 0;
}
.region-home-first-area-1 #block-block-12 {
height: 230px;
}
.region-home-first-area-1 #block-block-13 {
margin: 0 15px;
height: 230px;
}
.region-home-first-area-1 #block-block-14 {
height: 230px;
}
#bimage1 img, #bimage2 img {
width: 310px;
height: 230px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 20px;
-webkit-border-radius: 20px; /* Safari */
-moz-border-radius: 20px; /* Firefox */
}