How to create table by using div - html

Question

I want to create a table like this, but using div instead of table
<style type="text/css">
body{ font-family:"Segoe UI", "Tahoma" }
td {
padding:0px 5px 10px 5px;
}
.username {
white-space:nowrap;
vertical-align:top;
text-align:right;
width:auto;
color:DodgerBlue;
}
</style>
<table width="500px" >
<tr>
<td class="username">copperfield</td>
<td>How to create table by using div </td>
<td style="vertical-align:top">time </td>
</tr>
<tr>
<td class="username">copperfield</td>
<td>
How to create table by using div How to create table by sing div How to create table by to create table by using div <img src="images/thinking.gif"> </br>
</td>
<td style="vertical-align:top"> 8:00 </td>
</tr>
<tr>
<td class="username"> </td>
<td>
How to create table by using div</br>
</td>
<td style="vertical-align:top"> 8:00 </td>
</tr>
<tr>
<td class="username"> </td>
<td>
How to create table by using div</br>
</td>
<td style="vertical-align:top"> 8:00 </td>
</tr>
<tr>
<td class="username">michael</td> <td><img src="images/thinking.gif"> Gi ku </td>
<td style="vertical-align:top"> 8:00 </td>
</tr>
</table>
I try the following code but it is not successful
<style type="text/css">
body{
font-family:Segoe UI;
}
.all{
float:left;
display:block;
}
.chat{
width:700px;
float:left;
display:table-cell;
}
.us{
color:blue;
text-align:right;
float:left;
margin-right:10px;
}
.ct{
white-space:normal;
float:left;
margin-right:10px;
}
.t{
float:left;
width:auto
}
</style>
<div class="all">
<div class="chat">
<div class="us"> userna3 46346346me </div>
<div class="ct"> content </div >
<div class="t"> time </div>
</div>
<div class="chat">
<div class="us"> copperfield </div>
<div class="ct"> How to create table by using div How to create table by sing div How to create table by to create table by using div</div>
<div class="t"> 8:00 </div>
</div>
<div class="chat">
<div class="us"> copperfield </div>
<div class="ct"> How to create table by using div Ho </div>
<div class="t"> 8:00 </div>
</div>
</div>

Answer 1

This looks like what you want: http://jsfiddle.net/ttunW/. The key was using display:table; for .all, display:table-row;, for .chat, getting rid of the float:left properties on all the divs, and assigning display:table-cell; to the divs within .chat.

Answer 2

You can't have something floating in a float. It just doesn't work in some ugly browsers cough IE cough.
So change your all class in your css to look like this:
.all div {float:left;}
Then take away all the other floats from your classes. For the us, ct, and t just give them a set width inside of each chat div. Also change the div's inside of the chat div's to p tags.