Dos divs a la misma altura

Thecrack007 · #1 (**permalink**) 17/04/2011, 05:11

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.

nedyer · #2 (**permalink**) 19/04/2011, 17:02

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>

GUIOOS · #3 (**permalink**) 21/04/2011, 00:18

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

saul123 · #4 (**permalink**) 21/04/2011, 02:04

Hola

Pero al darle un alto a los divs se limitaria y si aumenta el el contenido de estos divs se saldra del div.

jomaruro · #5 (**permalink**) 22/04/2011, 02:42

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.

Thecrack007 · #6 (**permalink**) 30/04/2011, 14:35

Pero es que todos esos divs no tienen un "height" definido, van aumentando según el contenido.

C2am · #7 (**permalink**) 30/04/2011, 15:02

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