Alinear misma altura divs

ale_dla · #1 (**permalink**) 19/02/2011, 00:37

HOla a todos!
SOlamente quiero hacer divs simples en html.
El div principal alineado al centro,un div derecho y un div izquierdo.
El div central lo alinea bien pero nose como hacer para que los divs izquierdo y derecho queden a la misma altura que el de central.
Mi codigo es este:

Código PHP:

  <!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>Divs</title>
<style type="text/css">
#div-menu{
    margin-left:auto;
    margin-right:auto;
    margin-bottom:3px;
    width:1090px;
    height:35px;
    background:#F90;
}
#div-central{
    margin-left:auto;
    margin-right:auto;
    width:560px;
    height:680px;
    background:#09C;
    border-right:1px solid #999;
    border.radius: 10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
}
#div-izquierdo{
    float:left;
    width:265px;
    height:540px;
    background:#060;
}
#div-derecho{
    float:right;
    width:265px;
    height:360px;
    background:#999;
}
</style>
</head>
<body>
<div id="div-menu">
</div>
<div id="div-central">
</div>
<div id="div-izquierdo">
</div>
<div id="div-derecho">
</div>
</body>
</html>

Solamente lo estoy haciendo para aprender nada mas.
Muchas gracias !

jomaruro · #2 (**permalink**) 19/02/2011, 03:26

Hola:

Échale un vistazo a este ejemplo del compañero kseso?. Creo que te resultará útil.

Saludos.

ofmjuanabascal · #3 (**permalink**) 19/02/2011, 03:33

Has de hacerlos "flotar" todos en la misma dirección y despues ir ajustando los margenes y el padding. Aquí esta el código que he modificado. Espero que te sirva.

Código HTML:

Ver original<!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>Divs</title>
<style type="text/css">
#div-menu{
    margin-left:auto;
    margin-right:auto;
    margin-bottom:3px;
    width:1090px;
    height:35px;
    background:#F90;
}
#div-central{
    margin-left:auto;
    margin-right:auto;
    width:560px;
    height:680px;
    background:#09C;
    border-right:1px solid #999;
    border.radius: 10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 float:left;
 margin: 0 50px 0 50px;
}
#div-izquierdo{
    float:left;
    width:265px;
    height:540px;
    background:#060;
    margin-left: 30px;
}
#div-derecho{
    float:left;
    width:265px;
    height:360px;
    background:#999;
}
</style>
</head>
<body>
<div id="div-menu">
</div>
<div id="div-izquierdo">
</div>
<div id="div-central">
</div>
<div id="div-derecho">
</div>
</body>
</html>

ale_dla · #4 (**permalink**) 19/02/2011, 14:21

Muchas gracias amigos por la ayuda!
Agradezco sus respuestas
Saludos !

Fraannn · #5 (**permalink**) 19/02/2011, 16:05

sino tambien podes usar :

top: XXXpx
ubica la etiqueta div a XXX pixels del top

ale_dla · #6 (**permalink**) 19/02/2011, 16:57

Habia probado con top: pero no me funcionaba.
Gracias