[SOLVED] How do I display text like this?

[dpacmittal]

I am making a chatscript using ajax. When new message arrives, it is shown inside div tag. The message appears in the format: 

 

Username: Message

Example,

dpacmittal:Hi, how are you?

 

I want to use css to display it like this:

                    user1: Message1

              username2: Message2

 

Username will be aligned to the right and message to the left. I know this can be done using tables but how do I do it using div tags?

 

[rhodesa]

the only way to do it is with a fixed width for both:

 

<style type="text/css">
  #chat {
    width: 600px;
    border: solid 1px #999;
  }
  .message {
    clear: both;
  }
  #chat .user {
    float: left;
    font-weight: bold;
    width: 195px;
    text-align: right;
    padding-right: 5px;
  }
  #chat .text {
    float: left;
    width: 400px;
  }
</style>
<div id="chat">
  <div class="message">
    <div class="user">user1:</div>
    <div class="text">Message1</div>
  </div>
  <div class="message">
    <div class="user">dpacmittal:</div>
    <div class="text">Hi, how are you?</div>
  </div>
  <div class="message">
    <div class="user">user2:</div>
    <div class="text">Here is some text</div>
  </div>
  <div class="message">
    <div class="user">user1:</div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget nulla a purus semper fermentum. Nam ultrices, augue ut varius gravida, elit turpis interdum diam, eget elementum metus mi quis nunc. Nullam sapien nisl, malesuada ac, facilisis vitae, aliquam et, magna. Vestibulum diam urna, fermentum at, placerat non, fermentum ac, quam. Sed adipiscing ante sit amet lacus. Sed sodales justo vitae enim.</div>
  </div>
  <div class="message">
    <div class="user">dpacmittal:</div>
    <div class="text">Goodybe everyone</div>
  </div>
  <div class="message"></div>
</div>

[dpacmittal]

Thanks.. that just solved the problem.