Foros del Web » Creando para Internet » CSS »

Alinear misma altura divs

Estas en el tema de Alinear misma altura divs en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/02/2011, 00:37
Avatar de ale_dla  
Fecha de Ingreso: abril-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 189
Antigüedad: 8 años, 8 meses
Puntos: 3
Alinear misma altura divs

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.radius10px;
 -
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 !
  #2 (permalink)  
Antiguo 19/02/2011, 03:26
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: Alinear misma altura divs

Hola:

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

Saludos.

  #3 (permalink)  
Antiguo 19/02/2011, 03:33
Avatar de ofmjuanabascal  
Fecha de Ingreso: noviembre-2010
Ubicación: Cantabria
Mensajes: 17
Antigüedad: 7 años
Puntos: 0
Respuesta: Alinear misma altura divs

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Divs</title>
  5. <style type="text/css">
  6. #div-menu{
  7.     margin-left:auto;
  8.     margin-right:auto;
  9.     margin-bottom:3px;
  10.     width:1090px;
  11.     height:35px;
  12.     background:#F90;
  13. }
  14. #div-central{
  15.     margin-left:auto;
  16.     margin-right:auto;
  17.     width:560px;
  18.     height:680px;
  19.     background:#09C;
  20.     border-right:1px solid #999;
  21.     border.radius: 10px;
  22.  -moz-border-radius:10px;
  23.  -webkit-border-radius:10px;
  24.  float:left;
  25.  margin: 0 50px 0 50px;
  26. }
  27. #div-izquierdo{
  28.     float:left;
  29.     width:265px;
  30.     height:540px;
  31.     background:#060;
  32.     margin-left: 30px;
  33. }
  34. #div-derecho{
  35.     float:left;
  36.     width:265px;
  37.     height:360px;
  38.     background:#999;
  39. }
  40. </head>
  41. <div id="div-menu">
  42. </div>
  43. <div id="div-izquierdo">
  44. </div>
  45. <div id="div-central">
  46. </div>
  47. <div id="div-derecho">
  48. </div>
  49. </body>
  50. </html>
  #4 (permalink)  
Antiguo 19/02/2011, 14:21
Avatar de ale_dla  
Fecha de Ingreso: abril-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 189
Antigüedad: 8 años, 8 meses
Puntos: 3
Respuesta: Alinear misma altura divs

Muchas gracias amigos por la ayuda!
Agradezco sus respuestas
Saludos !
  #5 (permalink)  
Antiguo 19/02/2011, 16:05
 
Fecha de Ingreso: junio-2010
Mensajes: 10
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: Alinear misma altura divs

sino tambien podes usar :

top: XXXpx
ubica la etiqueta div a XXX pixels del top
  #6 (permalink)  
Antiguo 19/02/2011, 16:57
Avatar de ale_dla  
Fecha de Ingreso: abril-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 189
Antigüedad: 8 años, 8 meses
Puntos: 3
Respuesta: Alinear misma altura divs

Habia probado con top: pero no me funcionaba.
Gracias

Etiquetas: html
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 15:54.