Problema con altura en un div Tengo un pequeño problema, he estado mirando por internet diversas soluciones y no veo nada que me favorezca al respecto. El problema que tengo es que, aparte de tener un div padre que contiene una parte de la web (más abajo pongo el código) tengo un div hijo que se forma de dos columnas. Una que tiene 2 imágenes y otra para las noticias. El problema que tengo es que cuando la noticia tiene una altura considerable, el div de esta baja pero el del bloque de imágenes se queda quieto, ya que a este le puse un background para que no se notara tanto, y bueno, no baja. Os dejo una captura de ejemplo:
Aquí os dejo el cógio:
HTML
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Documento sin título</title> <link rel="stylesheet" href="css/estilo_css2.css" /> </head> <body> <div class="contenedor"> <div class="sombra_superior"></div> <div class="borde_izda"> </div> <div class="contenido"> <div> <div class="only_float"><img src="images/f5_04.jpg" /></div> <div class="only_float"> <div class="menu_up"></div> <div class="menu_down"></div> </div> </div> <div class="cuerpo"> <div class="padre"> <div style="float:left; width:266px;"> <div class="links"> <div class="menu_titulo">Menú Principal</div> <div class="menu_linea"></div> <div class="menu_contenido"> <li><a href="#">Tarifas</a></li> <li><a href="#">Servicios</a></li> <li><a href="#">Situación</a></li> <li><a href="#">Cómo Llegar</a></li> <li><a href="#">Ofertas</a></li> <li><a href="#">Lugares de Interés</a></li> <li><a href="#">Sugerencias</a></li> <li><a href="#">Madrid 100 años Gran Vía</a></li> <li><a href="#">Contacto</a></li> </div> </div> <!-- Cierra Link --> </div><!-- Cierra float left--> <div style="float:left;"> <img src="images/f5_12.jpg" /> </div> </div><!-- Cierra Padre --> <div class="hijo"> <div class="imagenes"> <div id="uno"><img src="images/f5_14.jpg" /></div> <div class="img_espaciada" id="dos"><img src="images/imagen.jpg" /></div> </div> <!-- Cierra imagenes --> <div class="buscador" id="buscador"> <div class="buscador_pos"> <input name="buscador" type="text" value="Buscar.." /> <input name="Ir" type="button" value="Ir" /> </div> </div> <div class="noticias" id="noticia"> <div class="contenido_noticia"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula nibh eu nulla sodales at accumsan mi dapibus. Vestibulum interdum fermentum risus at pellentesque. Vestibulum in lorem sapien. Proin egestas mauris eu elit ullamcorper tristique. Fusce sed orci a enim dictum imperdiet sit amet vel augue. Aenean pellentesque metus eget lorem commodo varius. Proin est quam, scelerisque tincidunt accumsan sed, interdum vel sem. In pharetra nisi non nisl eleifend lacinia. Proin tempus cursus condimentum. Nulla sit amet libero libero. Curabitur luctus, mi a malesuada pulvinar, nisi sem pretium diam, eget dapibus nunc tellus at orci. Nulla vitae nulla eu elit pretium rutrum. Aenean ipsum nisi, suscipit eu ultricies a, semper a turpis. Phasellus convallis arcu a ligula fermentum gravida. Vivamus ac ante ligula. Nunc ullamcorper sagittis ante, quis porta orci tempus eu. Sed libero neque, varius eget malesuada et, auctor nec dui. Donec gravida risus ac risus cursus laoreet. Integer cursus euismod ullamcorper. In ullamcorper gravida gravida. Morbi congue dui id nibh porttitor et dictum arcu aliquam. Suspendisse potenti. Nam tincidunt lobortis felis, a adipiscing eros gravida id. Nunc eu vulputate nunc. Morbi turpis ante, venenatis non ultricies nec, feugiat at risus. Suspendisse sit amet aliquet metus. Morbi nibh est, consectetur volutpat porttitor et, semper eget arcu. Nulla porta mauris eu nisl malesuada congue. Ut non libero eget lectus malesuada vestibulum non non turpis. Cras id magna eget sem interdum vulputate ut ut quam. Duis bibendum luctus gravida. Nulla dictum urna id ipsum scelerisque adipiscing. Phasellus consectetur sagittis odio, et pellentesque libero porta id. Nullam at lacus nisl. Quisque volutpat sem non odio semper et venenatis elit tincidunt. Curabitur eleifend pretium porta. Duis vitae odio ut justo dapibus posuere at ut dolor. Fusce urna leo, volutpat ac tempor et, blandit sed elit. Suspendisse facilisis massa nisi. Etiam dolor ipsum, dapibus in sollicitudin quis, tempor ut augue. Proin enim urna, tincidunt iaculis consequat fermentum, tempor sit amet nibh. Sed elementum consequat nisl at lobortis. </p> <p>Etiam dolor ipsum, dapibus in sollicitudin quis, tempor ut augue. Proin enim urna, tincidunt iaculis consequat fermentum, tempor sit amet nibh. Sed elementum consequat nisl at lobortis. </p> </p> <p> </p> <p> </p> </div> </div> </div> <!-- Cierra Hijo --> </div> <!-- Cierra cuerpo --> </div> <!-- Cierra Contenido --> <div class="borde_dcha"> </div> </div> <!-- Cierra Contenedor --> </body> </html>
CSS
Código:
* {
margin: 0;
padding: 0;
border: 0;
}
body, html{
background-image: url(../images/bg.jpg);
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
width:981px;
margin:0 auto;
/* Hack para IE * */
*margin:0 auto 0 auto;
*text-align:left;
}
.sombra_superior{
display:block;
height:23px;
width:980px;
background-image:url(../images/f5_sombra_superior.jpg);
}
.borde_izda{
height:227px;
width:56px;
float:left;
background-image:url(../images/f5_borde_izda.jpg);
display:block;
}
.contenido{
width:878px;
float:left;
display:block;
}
.borde_dcha{
height:227px;
width:46px;
float:left;
background-image:url(../images/f5_borde_dcha.jpg);
display:block;
position:relative;
right:4px;
}
.logo{
width:100%;
float:left;
}
.only_float{
float:left;
}
.menu_up{
background-image:url(../images/f5_06.jpg);
width:611px;
height:62px;
}
.menu_down{
background-image:url(../images/f5_09_2.jpg);
width:611px;
height:55px;
}
.contenido_izda{
width:266px;
float:left;
height:100%;
}
.links{
background-image:url(../images/f5_bg_bloqueizda.jpg);
width:266px;
height:287px;
font-weight:bold;
font-size:12px;
}
.menu_titulo{
color: #003b9d;
padding-top: 20px;
padding-left: 45px;
}
.menu_linea{
background-image:url(../images/f5_linea_menu.jpg);
height:2px;
width:216px;
position:relative;
left:25px;
top: 10px;
}
.menu_contenido{
position: relative;
bottom: -20px;
list-style: none;
padding-left:45px;
*padding-left:5px;
}
.menu_contenido li{
background-image:url(../images/f5_boton_li.jpg);
background-repeat:no-repeat;
padding-left: 30px;
margin-bottom:5px;
height:17px;
*height:18px;
padding-top: 1px;
}
li a:link, li a:visited{
text-decoration:none;
color: #002461;
}
li a:hover {
color: #004fd5;
}
.hijo{
float:left;
min-height:100%;
height:100%;
width:100%;
}
.imagenes{
float:left;
width:265px;
background-color:#a8c1e3;
}
.img_espaciada{
padding-top: 10px;
background-color:#a8c1e3;
}
.buscador{
text-align:right;
background-color: #335089;
height: 44px;
float:left;
width:612px;
}
.buscador_pos{
position: relative;
top: 12px;
left: 160px;
width:400px;
}
.noticias{
background-image:url(../images/f5_bg_noti.jpg);
float:left;
width:612px;
}
.contenido_noticia{
color:#627285;
font-family:Verdana, Geneva, sans-serif;
font-size:13px;
padding:38px 48px 0px 42px;
}
.pie_noticia{
width:100%;height:17px;
text-align:right;
position:relative;
left:45px;
}
.pie_noticia_redonda{
float:right;
width:21px;
height:17px;
background-image:url(../images/f5_borde_noti.jpg);
}
A ver si alguno tiene alguna idea de lo que puede pasar :(
Un saludo y muchas gracias !
Este tema le ha gustado a 1 personas