Why my textarea box being positioned differently in different browsers

this is the html structure.

       <form id="coment"....>
  <div id="name"><input....>....</div>
   <div id="email"><input....>....</div>
  <div id="website"><input....>....</div>
  <div id="textbox"><textarea...>....</div>
<div id="submit"><inp开发者_C百科ut...>....</div>
 </form>

i want the textarea box is on the right of the name,email,website's text. like this picture shows. http://run.xxmn.com/1.png

when i add this style to the "textbox",

    width:400px;
   position: relative;
   top: -70px;
    left: 3px;

in Chrome and IE 8, the textarea's div id unorder,it's on the above of the name,email,website's part.

In Firefox, IE6,7.it shows ok.

How can I make it be right in Chrome and IE 8 too?

The correct way to lay this out would be to create a new divs representing columns for the form and place the three inputs in the left column and the textbox in the right column.

For example:

<div class="left">
    <div id="name"><input....>....</div>
    <div id="email"><input....>....</div>
    <div id="website"><input....>....</div>
</div>
<div class="right">
    <div id="textbox"><textarea...>....</div>
</div>

Then:

.left {
    float: left;
    width: 50%;
}

.right {
    float: right;
    width: 50%;
}

#name, #email, #website, #textbox {
    width: 100%;
}

#testbox {
    height: 300px; /* However tall it needs to be */
}