como hacer que un div funcione como una tabla en css

[oscarbt]

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:

<style>
    .tabla
{
   clear: none;
   overflow: auto;
   border:1px solid #FFFFFF; font-size:12pt;
}
 
.fila
{
   clear: both;
}
 
.columna
{
   float: left;
   padding: 5px;
    width:250px;
   border-style: solid;
   height: auto;
   border-right-width: 0px;
   border-left-width: 0px;
   border-top-width: 0px;
   border-bottom-width: 1px;
   background:#CCCCFF; padding:2px 6px 4px; 
   border:1px solid #FFFFFF; font-size:11pt;
   
}
</style>
 
<div class="tabla">
    <div class="fila">
        <div class="columna">Nombre</div>
        <div class="columna">Apellidos</div>
    </div>
    <div class="fila">
        <div class="columna">Nombre de ejemplo 1WFWEREWRWESSSSSSSSSSSSSSSSSSSSSSSS</div>
        <div class="columna">Apellidos de ejemplo 1</div>
    </div>
    <div class="fila">
        <div class="columna">Nombre de ejemplo 2</div>
        <div class="columna">Apellidos de ejemplo 2</div>
    </div>
    <div class="fila">
        <div class="columna">Nombre de ejemplo 2</div>
        <div class="columna">Apellidos de ejemplo 2</div>
    </div>
</div>
 

Agradezco me puedan ayudar o dar una orientacion..gracias

[pzin]

Tendrías que indagar un poco más en cómo flotar y posicionar elementos en CSS y quitarte de la cabeza la forma de trabajar que tenías con tablas. Es bastante diferente.

De todas formas esto de que el uso de las tablas para el diseño/estructuración del sitio esté obsoleto ya es así desde hace más de una década.

Eso de los saltos de línea, es algo que ocurre de forma automática, tanto usando tablas como si no. Así que algo raro estarás haciendo. Rspecto a tener la misma altura dos elementos hermanos, busca "columnas equilibradas" que ya se ha hablado más de una vez por el foro.

[oscarbt]

Gracias, con respecto al height, me di cuenta q no me funcionaba porque coloque una palabra bastante larga, cosa q no es comun, eso no me genera problema...Muchas gracias por la colaboracion...

[pzin]

Iniciado por oscarbt

coloque una palabra bastante larga

No me di cuenta de eso. Que de todas formas, eso puede evitarse con:

Código CSS:

word-wrap: break-word;
 

[oscarbt]

ok gracias