Warum meine TextArea-Box in verschiedenen Browsern anders positioniert ist

Question

Dies ist die HTML-Struktur.

 <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"><input...>....</div> 
</form> 

ich will das Textfeld Feld auf der rechten Seite des Namens ist, E-Mail, Text-Website. wie dieses Bild zeigt. http://run.xxmn.com/1.png

, wenn ich diesen Stil der "Textbox" hinzufügen,

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

in Chrome und IE 8, die div id unorder der Textbereich, dann ist es auf der oben der Name, E-Mail, ein Teil der Website.

In Firefox zeigt IE6,7.it ok.

Wie kann ich es auch in Chrome und IE 8 richtig machen?

Answer 1

Der richtige Weg, dies auszulegen, wäre, ein neues divs zu erstellen, das Spalten für das Formular darstellt, und die drei Eingaben in die linke Spalte und das Textfeld in der rechten Spalte zu setzen.

Zum Beispiel:

<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> 

Dann:

.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 */ 
}