なぜ私のテキストエリアのボックスが異なるブラウザで異なって配置されているのですか

Question

これはhtml構造体です。

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

私はtextareaボックスが名前、電子メール、ウェブサイトのテキストの右側にあることを望みます。この写真のように。 http://run.xxmn.com/1.png

私はChromeとIE 8、テキストエリアののdivのid unorderに

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

、「テキストボックス」に、このスタイルを追加するとき、それは名前、電子メール、ウェブサイトの一部の上の上です。

Firefoxでは、IE6.7.itがokを示します。

ChromeとIE 8でも正しく機能させるにはどうすればよいですか？

Answer 1

これをレイアウトする正しい方法は、フォームの列を表す新しいdivを作成し、3つの入力を左側の列に、テキストボックスを右側の列に配置することです。

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

そして：

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

例えば