Foros del Web » Creando para Internet » HTML »

Dos divs a la misma altura

Estas en el tema de Dos divs a la misma altura en el foro de HTML en Foros del Web. Hola. Yo tengo mi pagina estructurada de esta manera: Código HTML: <div id= "contenido" > <div id= "noticias" style= "float:left" > <!-- Contenido de la ...
  #1 (permalink)  
Antiguo 17/04/2011, 06:11
 
Fecha de Ingreso: noviembre-2010
Mensajes: 28
Antigüedad: 7 años, 1 mes
Puntos: 0
Dos divs a la misma altura

Hola. Yo tengo mi pagina estructurada de esta manera:
Código HTML:
<div id="contenido">
       <div id="noticias" style="float:left">
       <!-- Contenido de la capa noticias -->
       </div>

       <div id="menu_derecha" style="float:left">
       <!-- Contenido de la capa menu_derecha -->
       </div>
</div> 
El div "contenido" tiene un color de fondo. Si le quito los "float:left" a las capas "noticias" y "menu_derecha" se ve bien pero no me quedan en la misma línea, es decir, se ve uno encima de otro.

Si les pongo los "float:left", se colocan uno al lado de otro pero se salen del div ccontenido y por lo tanto salen fuera de ese color de fondo. Alguien tiene la solución? Gracias.
  #2 (permalink)  
Antiguo 19/04/2011, 18:02
 
Fecha de Ingreso: enero-2011
Mensajes: 93
Antigüedad: 6 años, 11 meses
Puntos: 7
Respuesta: Dos divs a la misma altura

esto debe ser lo que quieres pero no especificas mucho

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<style type="text/css">
.contenido {
height: 500px;
width: 500px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
text-transform: uppercase;
text-align: center;
background-color: #F7F7F7;
}

.noticias {
padding: 0px;
width: 250px;
height: 500px;
float: left;
}
.menu_derecha {
float: left;
height: 500px;
width: 250px;
}
</style>
</head>

<body>
<div class="contenido" id="contenido">
<div class="noticias" id="noticias">noticias</div>
<div class="menu_derecha" id="menu_derecha">menu derecha</div>
</div>
</body>
</html>
  #3 (permalink)  
Antiguo 21/04/2011, 01:18
 
Fecha de Ingreso: junio-2009
Ubicación: Chihuahua
Mensajes: 27
Antigüedad: 8 años, 5 meses
Puntos: 0
De acuerdo Respuesta: Dos divs a la misma altura

Con lo que ha contestado nedyer puedes salir de tu situación . Te faltaba hacer mejor el maquetado de tus divs, con medidas para que lograras el efecto deseado.

Para tener divs en línea y que aún se comporten como elementos contenedores (block elements) puedes usar la propiedad CSS Display con el valor inline-block. Creo que Internet Explorer no lo soporta. Pero con float también puedes lograr eso. Y si deseas agregar más divs y estos se siguen acomodando a la izquierda no olvides usar clear:left.

Saludos
  #4 (permalink)  
Antiguo 21/04/2011, 03:04
 
Fecha de Ingreso: marzo-2011
Mensajes: 119
Antigüedad: 6 años, 9 meses
Puntos: 9
Respuesta: Dos divs a la misma altura

Hola

Pero al darle un alto a los divs se limitaria y si aumenta el el contenido de estos divs se saldra del div.
  #5 (permalink)  
Antiguo 22/04/2011, 03:42
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Dos divs a la misma altura

Hola:

Lógico, si tienes una pared de 2 metros y le pones dos cuadros de 1,5 metros (uno al lado del otro), es lógico que los cuadros se salgan de la pared ¿no?

Saludos.

  #6 (permalink)  
Antiguo 30/04/2011, 15:35
 
Fecha de Ingreso: noviembre-2010
Mensajes: 28
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Dos divs a la misma altura

Pero es que todos esos divs no tienen un "height" definido, van aumentando según el contenido.
  #7 (permalink)  
Antiguo 30/04/2011, 16:02
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Dos divs a la misma altura

Tienes que darle un ancho definido, no una altura.

Ahora, estoy un poco perdido, nedyer puso un código, pero no sé si es tuyo o lo puso como ejemplo.

Basandome en lo tuyo, digo que debes ponerle un ancho determinado, teniendo en cuenta la recomendación de jomamuro (ancho1+ancho2<= anchocontenedor)
saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Etiquetas: altura, divs
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




La zona horaria es GMT -6. Ahora son las 02:59.