cambiar estas tablas a divs

[cyber_dark]

Saludos, bueno esto de mudar las tablas a divs me ha estado un poco de problemas, bueno como puedo pasar esto:

Código:

<table width="100%">
   
              while(){ //Aqui hay un ciclo que muestra lo de abajo una y otra vez

	<tr>
		<td class="rec1">Texto</td>
		<td class="rec2">Texto</td>
		<td class="rec3">Texto</td>
		<td class="rec4">Texto</td>
	</tr>

              }

</table>

Código:

.rec1, .rec2, .rec3, .rec4{
height: 50px;
background:#fff; 
color:#6e6e6e;
-moz-border-radius:.3em; 
-webkit-border-radius:.3em; 
border-radius:.3em; 
border:1px solid #eee; 
padding:3px;
margin:1px;
}


.rec1{
width:10%;
text-align:center;
}

.rec2{
width:40%;
}

.rec2 a:link, 
.rec2 a:hover, 
.rec2 a:active, 
.rec2 a:visited{
font-weight: bold;
color:#666;
text-decoration: none;
}

.rec3{
width:20%;
text-align:center;
}

.rec4{
width:30%;
}

Intente usar listas pero la ultima columna se viene hacia abajo, espero puedan ayudarme o al menos orientarme para que funcione.

Es parecido a la pag anterior a la que estubieron donde se muestran los temas de los posts, la fecha etc, pero al ver el codigo de esta pagina veo que usa tablas, espero alguien me heche una mano.

[C2am]

Quitando todo lo que sea tabla y poniendo div los cuales reemplazarán a los/las td.

Muestra el código que tienes (sin tablas) para ver por qué falla.

Ten en cuenta que para el ancho se suma el width+boder+margin+padding. Es posible que debido a eso el último se posicione por debajo.
Saludos

[cristian_cena]

Guía de migración: por mikmoro
Además: muy útil ver sobre la propiedad float, pues con esta crearás columnas.
IE8+ podes usar display:table