Ver Mensaje Individual
  #1 (permalink)  
Antiguo 17/02/2013, 13:45
oscarbt
 
Fecha de Ingreso: abril-2009
Ubicación: Colombia
Mensajes: 949
Antigüedad: 15 años
Puntos: 27
como hacer que un div funcione como una tabla en css

Hola a todos, leyendo en internet recomiendan el uso de divs en vez de tablas.

Estoy tratando de usar solo divs pero no tengo el suficiente conocimiento en css para hacerlo

Mi principal inconveniente es en el height del div y en el width
Como saben si yo tengo una tabla donde le digo que los td tengan un ancho. Asi haya arto texto, éste va bajando como si fuera otro renglon...eso no lo he podido hacer con css para el div..es decir q si el texto supera el ancho del div, este siga bajando de renglon

Pero ahi no termina el inconveniente..Si yo tengo un div q flota a la izquierda y otro mas q tambien flota a la izquierda (asumiendo que son dos celdas) , como hago para que el div q esta a la derecha me tome el height del div q esta a la izquierda?

Aca mi codigo;

Código HTML:
Ver original
  1.     .tabla
  2. {
  3.    clear: none;
  4.    overflow: auto;
  5.    border:1px solid #FFFFFF; font-size:12pt;
  6. }
  7.  
  8. .fila
  9. {
  10.    clear: both;
  11. }
  12.  
  13. .columna
  14. {
  15.    float: left;
  16.    padding: 5px;
  17.     width:250px;
  18.    border-style: solid;
  19.    height: auto;
  20.    border-right-width: 0px;
  21.    border-left-width: 0px;
  22.    border-top-width: 0px;
  23.    border-bottom-width: 1px;
  24.    background:#CCCCFF; padding:2px 6px 4px;
  25.    border:1px solid #FFFFFF; font-size:11pt;
  26.    
  27. }
  28.  
  29. <div class="tabla">
  30.     <div class="fila">
  31.         <div class="columna">Nombre</div>
  32.         <div class="columna">Apellidos</div>
  33.     </div>
  34.     <div class="fila">
  35.         <div class="columna">Nombre de ejemplo 1WFWEREWRWESSSSSSSSSSSSSSSSSSSSSSSS</div>
  36.         <div class="columna">Apellidos de ejemplo 1</div>
  37.     </div>
  38.     <div class="fila">
  39.         <div class="columna">Nombre de ejemplo 2</div>
  40.         <div class="columna">Apellidos de ejemplo 2</div>
  41.     </div>
  42.     <div class="fila">
  43.         <div class="columna">Nombre de ejemplo 2</div>
  44.         <div class="columna">Apellidos de ejemplo 2</div>
  45.     </div>
  46. </div>
Agradezco me puedan ayudar o dar una orientacion..gracias