Tema: Alienar horizontalment con diferentes alturas
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 11/03/2010, 14:41
hinfra
 
Fecha de Ingreso: octubre-2008
Mensajes: 93
Antigüedad: 15 años, 6 meses
Puntos: 1
Alienar horizontalment con diferentes alturas
Saludos, tengo un pequeño problemilla con CSS.

Tengo el siguiente código CSS:
Código CSS: 
Ver original
  1. body{
  2. text-align:center;
  3. background-color:#b1005b;
  4. }
  5.  
  6. #contenedor{
  7. margin: auto;
  8. margin-top: 150px;
  9. width: 900px;
  10. height: 400px;
  11. text-align:left;
  12. background-color:#fff;
  13. }
  14.  
  15. #boton1{
  16. color:#000;
  17. background-color:#ccc;
  18. width: 150px;
  19. height: 200px;
  20. float: left;
  21. cursor: pointer;
  22. position:relative;
  23. }
  24.  
  25. #boton2{
  26. color:#000;
  27. background-color:#ccc;
  28. width: 150px;
  29. height: 230px;
  30. float:left;
  31. cursor: pointer;
  32. position:relative;
  33. }
  34.  
  35. #boton3{
  36. color:#000;
  37. background-color:#ccc;
  38. width: 150px;
  39. height: 200px;
  40. float:left;
  41. cursor: pointer;
  42. position:relative;
  43. }
  44.  
  45. #boton4{
  46. color:#000;
  47. background-color:#ccc;
  48. width: 150px;
  49. height: 200px;
  50. float:left;
  51. cursor: pointer;
  52. position:relative;
  53. }
  54.  
  55. #boton5{
  56. color:#000;
  57. background-color:#ccc;
  58. width: 150px;
  59. height: 200px;
  60. float:left;
  61. cursor: pointer;
  62. position:relative;
  63. }
  64.  
  65. #boton6{
  66. color:#000;
  67. background-color:#ccc;
  68. width: 150px;
  69. height: 200px;
  70. float:left;
  71. cursor: pointer;
  72. position:relative;
  73. }
  74.  
  75. #aa{
  76. background-color:#ff0000;
  77. width: 900px;
  78. height: 200px;
  79. float:left;
  80. }

Y el siguiente HTML:
Código HTML: 
Ver original
  1. <html>
  2.     <head>
  3.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.         <title>New Web Project</title>
  5.     </head>
  6.     
  7.     <link href="css/style.css" rel="stylesheet" type="text/css" />
  8.     
  9.     <script src="js/jquery-1.4.2.min.js"></script>
  10.     
  11.     <script src="js/functions.js"></script>
  12.     
  13.     
  14.     <body>
  15.         <div id="contenedor">
  16.             <div id="boton1">Boton1</div>
  17.             <div id="boton2">Boton2</div>
  18.             <div id="boton3">Boton2</div>
  19.             <div id="boton4">Boton2</div>
  20.             <div id="boton5">Boton2</div>
  21.             <div id="boton6">Boton2</div>
  22.         
  23.         
  24.             <div id="aa">
  25.             
  26.             Hola
  27.             
  28.             </div>
  29.         
  30.         </div>
  31.         
  32.     </body>
  33. </html>

El problema es que los "botones" se ven así:


Y yo lo que quiero es que se vean así:


El problema es que el DIV se hace más largo y se mueve toda la web hacia abajo. Y yo lo que quiero es que el DIV se haga más alto... no sé si me explico, pero las imágenes hablan por si solas.

¡Gracias!