How to create table by using div

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>
      开发者_如何学Go      <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>

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.

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.