css内联哪个位置,css内联块元素定位

我想创建一个简单聊天的网页，一个用于消息的大框架，一个用户列表的更智能的框架(在右侧)和一个用户可以在第二个第一帧下面撰写消息的行。 / p>

我已经创建了3个框架而没有任何问题，但我的问题是我无法找到如何使contactbox框架占据整个左侧空间。如果我将宽度设置为％，则它位于消息帧下面。有人可以帮我吗？

HTML

User1 : Message 1

User1 : Message 2

User1

I'll write my message here

CSS

body{

margin: 0;

padding: 0;

}

#mainframe{

border: 1px solid white;

margin: 0 10px 0 10px;

}

#mainframe p{

margin: 0;

}

#mainframe #messagebox{

display: inline-block;

width: 85%;

min-width: 250px;

border-right: 1px solid white;

padding: 0;

vertical-align: bottom;

min-height: 500px;

}

#mainframe #contactbox{

display: inline-block;

width: 15%;

min-width: 150px;

vertical-align: top;

padding: 0;

min-height: 500px;

text-align: right;

}

#mainframe #composebox{

border-top: 1px solid white;

display: inline-block;

width: 100%;

min-width: 400px;

padding: 0;

min-height: 30px;

height: 30px;

text-align: left;

}

这是