如何將消息列在右側？

Question

HTML部分：

<div id='wrapper'> 
     <div id='box'> 
      Name:<br> 
      <input type='text' id='name' size='10'><br><br> 
      Message:<br> 
      <textarea id='message' size='15' ></textarea><br><br> 
      <br> 
      <div id='Send'>&nbsp;&nbsp;Send</div> 
     </div> 
     <div class='messages'> 
      <div id='loader'></div> 
      <ul class='update'></ul> 
      <?php //include(messages.php) ?> 
     </div> 


    </div> 

CSS科：

#box{ 
    width:300px; 
    height: 230px; 
    border:solid #6895CC 1px; 
    -webkit-box-shadow: 0 2px 5px #666; 
    box-shadow: 0 2px 5px #666; 
    padding: 10px; 
    margin:50px 0 0 400px; 

} 
#name{ 
    width:300px; 
    height: auto; 
    border:solid #6895CC 1px; 
    padding: 10px; 
    margin:5px 5px 0 2px; 
    border-radius: 5px; 
} 
#message{ 
    width:300px; 
    height: auto; 
    border:solid #6895CC 1px; 
    padding: 10px; 
    margin:5px 5px 0 2px; 
    border-radius: 5px; 
} 

#send{ 
    width: 50px; 
    border-radius: 5px; 
    padding: 5px; 
    background-color:#6895CC; 
    border:none; 
    color:#fff; 
} 

#send:hover{ 
    background-color:#4E65C0; 
} 
body{ 
    font-family:Verdana, Geneva, sans-serif; 
    font-size:11px; 
} 

.messages{ 
    display:inline; 
    width:250px; 
    height:638px; 
    overflow:hidden; 
    border:solid #8CACDD; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:11px; 
    float:right; 
    border-width:0 0 1px 1px; 
} 

如何移動郵件列了有關嗎？我已經包含了inline元素，它可以刪除之前和之後的任何下一行字符。需要做些什麼才能解決問題？

Answer 1

嘗試給float:left至CSS#box。

#box { 
    border: 1px solid #6895CC; 
    box-shadow: 0 2px 5px #666666; 
    float: left; 
    height: 230px; 
    margin: 50px 0 0 400px; 
    padding: 10px; 
    width: 300px; 
} 

Answer 2

我不確定你想象的是在哪裏「在右邊」。

我猜你的意思是在表格的右側。

要做到這一點，你必須給你的表單元素的包裝的div，如：

<div id='Form'> 
    <div id='box'> 
     Name:<br> 
     <input type='text' id='name' size='10'><br><br> 
     Message:<br> 
     <textarea id='message' size='15' ></textarea><br><br> 
     <br> 
     <div id='Send'>&nbsp;&nbsp;Send</div> 
    </div> 
    <div class='messages'> 
     <div id='loader'>test</div> 
     <ul class='update'></ul> 
     <?php //include(messages.php) ?> 
    </div> 
</div> 

，並給包裝#Form元素position: relative;和.messages：

position: absolute; 
top: 0; 
right: 0; 

看這裏，如果它你想要什麼：FIDDLE