Foros del Web » Creando para Internet » CSS »

Problema con altura en un div

Estas en el tema de Problema con altura en un div en el foro de CSS en Foros del Web. Muy buenas a todos :) Qué tal? Tengo un pequeño problema, he estado mirando por internet diversas soluciones y no veo nada que me favorezca ...
  #1 (permalink)  
Antiguo 30/04/2010, 03:15
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 7 meses
Puntos: 15
De acuerdo Problema con altura en un div

Muy buenas a todos :) Qué tal?
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>&nbsp; </p>
                	<p>&nbsp;</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 !
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #2 (permalink)  
Antiguo 30/04/2010, 14:58
Avatar de function  
Fecha de Ingreso: abril-2010
Mensajes: 278
Antigüedad: 7 años, 7 meses
Puntos: 13
Respuesta: Problema con altura en un div

te sugiero lo siguiente:

haz un reset simple a tu diseño para resetear los estilo del navegador, ejemplo:

Código CSS:
Ver original
  1. * {  
  2.     font-size: 100&#37;;  
  3.     border: none;  
  4.     padding: 0;  
  5.     margin: 0;  
  6.     }  
  7. body {  
  8.     padding: 0;  
  9.     }
  10. table {  
  11.     border-collapse: collapse;  
  12.     border-spacing: 0;  
  13.     }

Luego haz la hoja de estilos asi:

Código CSS:
Ver original
  1. body {
  2.     background:#000000 url(../images/bg.jpg) center top no-repeat; /* Aqui pones, el color y si quieres que se repita o no */
  3.     margin:0;
  4. }
  5.  
  6. /* Haz un contenedor para que maneje todo el sitio */
  7. #contenedor {
  8. text-align: left; /* Para que funcione con IE */
  9. width: 1000px; /* Pon el Ancho en el que diseñas tu sitio */
  10. margin: auto; /* Para que funcione con FF */
  11. }
  12.  
  13.  
  14. /* Aqui empieza a diseñar los contenedores siguientes, ya sean las dos o tres columnas, el header, etc */
  15. /* Aqui el contenedor de la izq. Nota: ponle height si quieres o tienes una altura predeterminada */
  16. #contenedor_izq {
  17. float:left;
  18. text-align:left;
  19. width: 250px;
  20. margin: 0;
  21. }
  22. /* Aqui el contenedor central Nota: ponle height si quieres o tienes una altura predeterminada */
  23. #contenedor_central {
  24. float:left;
  25. text-align:left;
  26. width: 500px;
  27. margin: 0;
  28. }
  29. /* Aqui el contenedor de la derecha Nota: ponle height si quieres o tienes una altura predeterminada */
  30. #contenedor_der {
  31. float:left;
  32. text-align:left;
  33. width: 250px;
  34. margin: 0;
  35. }
  36.  
  37. /* en cada contenedor maneja los contenidos, de esta manera se te hace mucho mas ordenado*/


Todo esto te lo pongo como sugerencia, porque la verdad es que con la impresion en pantala no se entiende bien, el problema

Suerte y espero te sirva
  #3 (permalink)  
Antiguo 03/05/2010, 03:25
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 7 meses
Puntos: 15
Respuesta: Problema con altura en un div

Gracias por tu respuesta, pero te cuento el problema más detalladamente.

Para que te hagás una idea, tengo 2 contenedor, el izquierdo y el derecho. El izquierdo son 2 imágenes y el derecho es donde si sitúan las noticias. El problema que tengo es que en el contenedor izquierdo, aparte de tener las imágenes puse un background de color azul (para que te hagás una idea) y cuando el tamaño de la noticia se amplía por debajo de las imágenes, quería que el div de estas bajase según se agranda el tamaño de la noticia. Le puse el color azul al fondo donde están las imágenes para que haga juego y no quede mal como puse en la imagen que sale arriba del todo.Si ves la imagen y te das cuenta, la noticia es más grande que el bloque izquierdo, y queda un espacio (marcado en rojo) que no se rellena con ningún color y queda bastante feo :)
Se entiende ?

Un saludo y muchas gracias !!
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #4 (permalink)  
Antiguo 03/05/2010, 09:43
Avatar de function  
Fecha de Ingreso: abril-2010
Mensajes: 278
Antigüedad: 7 años, 7 meses
Puntos: 13
Respuesta: Problema con altura en un div

Cita:
Iniciado por Jask Ver Mensaje
Gracias por tu respuesta, pero te cuento el problema más detalladamente.

Para que te hagás una idea, tengo 2 contenedor, el izquierdo y el derecho. El izquierdo son 2 imágenes y el derecho es donde si sitúan las noticias. El problema que tengo es que en el contenedor izquierdo, aparte de tener las imágenes puse un background de color azul (para que te hagás una idea) y cuando el tamaño de la noticia se amplía por debajo de las imágenes, quería que el div de estas bajase según se agranda el tamaño de la noticia. Le puse el color azul al fondo donde están las imágenes para que haga juego y no quede mal como puse en la imagen que sale arriba del todo.Si ves la imagen y te das cuenta, la noticia es más grande que el bloque izquierdo, y queda un espacio (marcado en rojo) que no se rellena con ningún color y queda bastante feo :)
Se entiende ?

Un saludo y muchas gracias !!

Ok creo que entendí tu situación: a ver si me entiendes y si me explico:

tienes dos columnas (supongamos que ya tienes el contenedor y el body realizado), vamonos directo a las dos columnas:

Código CSS:
Ver original
  1. #columna_izq {
  2. background: #003366 url(../imagenes/imagen.jpg) top center no-repeat;
  3. /* aqui le digo al contenedor izquierdo que de fondo el color es #003366, y la imagen debe estar centrada y en el tope, pero que la imagen no se repita, solo el color se repetirá llenando el espacio que sobrepase la imagen*/
  4. float:left;/* aqui le digo que flote a la izq del contenedor madrre */
  5. text-align:left; /* aqui le digo que todo debe estar situado a la izaq y para que funcione tambien para IE */
  6. width: 250px; /* aqui le digo que el anco para el contenedor izq es de 250 pixeles lo cual si la imagen es mas grande o mas pequeña, solo mostrará lo que este dentro de este 250px */
  7. height: 300px /*Esto es importantisimo, si sabes la altura de la imagen, pon la altura y se quedará estática en esa altura, pero si la altura del contenido se sobrepasara, no mostraría el texto a incluir, pero como nuca estaremos seguros de que texto se pondrá lo pondira dentro de un contenedor padre y este lo dejaría como hijo, asi el padre tendría el manejo del color y este solo de la imagen*/
  8. margin:0; /* te avconsejo siempre dejar el margin en cero ya que IE 6 no lo reconoce y te tocaría hacer un hack, si quieres tener espacios utiliza padding*/
  9. }

Espero me hayas entendido y si te sirve sino dimelo y te ayudo.

Saludos

Etiquetas: altura
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 03:44.