Tema: Divs debajo alado de otro y ordenados
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 09/08/2011, 12:46
Avatar de juan_14nob
juan_14nob
 
Fecha de Ingreso: abril-2010
Mensajes: 552
Antigüedad: 14 años
Puntos: 6
Divs debajo alado de otro y ordenados
Hola, estoy queriendo poner en un div llamado "todo" otros divs que contienen listas ( <ul> ) pero cada div tiene un height auto, el problema es que no se hubica uno alado de otro y debajo como yo quiero..

observen esta imagen, como se ve.


Aca les dejo el codigo por si lo quieren ver..

Código HTML: 
Ver original
  1. <html>
  2. <head>
  3. <style type="text/css">
  4.  
  5. #todo{
  6.     position:relative;
  7.     width:860px;
  8.     height:600px;
  9.     background:red;
  10.     color:white;
  11. }
  12. .adentro{
  13.     float:left;
  14.     height:auto !important;
  15.     margin: 2px 0px 0px 5px; 
  16.     padding:20px 0 10px 0px;
  17.     background:black;
  18.     width:200px;
  19.  
  20.  
  21. }
  22. </style>
  23. </head>
  24. <body>
  25.     <div id="todo">
  26.         <div class="adentro">
  27.             <ul>
  28.                 <li>uno</li>
  29.                 <li>dos</li>
  30.                 <li>uno</li>
  31.                 <li>dos</li>
  32.                 <li>uno</li>
  33.                 <li>dos</li>                
  34.                 <li>uno</li>
  35.                 <li>dos</li>
  36.                 <li>uno</li>
  37.                 <li>dos</li>
  38.             </ul>
  39.         </div>
  40.         <div class="adentro">
  41.             <ul>
  42.                 <li>uno</li>
  43.                 <li>dos</li>
  44.                 <li>uno</li>
  45.                 <li>dos</li>
  46.             </ul>   
  47.         </div>
  48.         <div class="adentro">
  49.             <ul>
  50.                 <li>uno</li>
  51.                 <li>dos</li>
  52.             </ul>
  53.         </div>
  54.         <div class="adentro">
  55.             <ul>
  56.                 <li>uno</li>
  57.                 <li>dos</li>
  58.                 <li>uno</li>
  59.                 <li>dos</li>
  60.                 <li>uno</li>
  61.                 <li>dos</li>
  62.                 <li>uno</li>
  63.                 <li>dos</li>
  64.             </ul>   
  65.         </div>
  66.         <div class="adentro">
  67.             <ul>
  68.                 <li>uno</li>
  69.                 <li>dos</li>
  70.                 <li>uno</li>
  71.                 <li>dos</li>
  72.                 <li>uno</li>
  73.                 <li>dos</li>
  74.             </ul>   
  75.         </div>
  76.         <div class="adentro">
  77.             <ul>
  78.                 <li>uno</li>
  79.                 <li>dos</li>
  80.         
  81.             </ul>
  82.         </div>
  83.         <div class="adentro">
  84.             <ul>
  85.                 <li>uno</li>
  86.                 <li>dos</li>
  87.                 <li>uno</li>
  88.                 <li>dos</li>
  89.                 <li>uno</li>
  90.                 <li>dos</li>
  91.                 <li>uno</li>
  92.                 <li>dos</li>
  93.                 <li>uno</li>
  94.                 <li>dos</li>
  95.             </ul>   
  96.         </div>
  97.     </div>
  98. </body>
  99. </html>


y lo que yo quiero hacer es esto..



observece como los divs se ubican bien posicionados , eso lo logre dandole un height fijo a los divs cuadrados (fondo negro), pero mi problema se encuentra al tener una altura automatica, osea, a medida que las listas vallan creciendo con elementos el cuadrado valla creciendo tambien o viceversa. espero que me hechen una mano..


Saludos