用CSS创建一个好看的聊天布局

Question

我想以一种很好的用户界面的方式安排一些html元素。 我正在使用MVC和ASP.NET来创建这个聊天客户端。但我无法得到正确安排的项目。默认情况下，visual studio中的MVC项目在网页顶部带有一段条目，并一直延伸到整个页面。我想要在页面左上方的textarea下面的默认条与整个消息对话框div下面的文本区域与textarea相同的宽度。

这里是我的html：

<div class="container" id="message-dialog"> 
    <input type="text" id="message" /> 
    <input type="button" id="sendmessage" value="Send" /> 
    <input type="hidden" id="displayname" /> 
</div> 
<div class="container" id="discussion-dialog"> 
    <textarea rows="20" cols="50" id="discussion"></textarea> 
</div> 

我已完成了这种设置一次，但是当我改变了页面的大小所有的div是重叠的，简直一塌糊涂。

Answer 1

#discussion-dialog 
{ 
    border: 3px solid #cccccc; 
    font-family: Tahoma, sans-serif; 
    position: relative; 
    top: 5px; 
} 

#message-line { 
    position: relative; 
} 

#message-dialog 
{ 
    position: relative; 
    top: 10px; 
    font-family: Tahoma, sans-serif; 
}