Html 边栏和容器宽度CSS问题_Html_Css_Css Float_Sidebar

Html 边栏和容器宽度CSS问题

html css

Html 边栏和容器宽度CSS问题,html,css,css-float,sidebar,Html,Css,Css Float,Sidebar,我有一个聊天系统的简单页面。测试页面可在此处找到：代码如下： <html> <head> <style type="text/css"> #page-wrap { margin-top: 10px; margin-bottom: 10px; width: 100%; /*for sidebar*/ margin-right: -110px; background-color: #AAAAFF; } #chat-wrap {

我有一个聊天系统的简单页面。测试页面可在此处找到：

代码如下：

<html>
<head>
<style type="text/css">
#page-wrap {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;

  /*for sidebar*/
  margin-right: -110px;
  background-color: #AAAAFF;
}

#chat-wrap {
  border: 1px solid #eee;
  margin: 0 5px 10px 0;
  float: left;

  /*margin for sidebar*/
    margin-right:115px;

  border: 1px solid red;
  background-color: #600000; }

#chat-area {

  width:100%;
  height: 400px;
  border: 1px solid #666;
  float: left;
}

#sidebar {
  border: 1px solid green;
  float: right;
  width: 110px;
  padding: 0px 0px 0px 5px;
}

#entry {
  background-color: #ffffff;
  padding: 5px;
  font-size: 1em;
  clear: both;
  border: 3px solid #999;
  height: 40px;
  width: 97%; }
#entry-btn {
  padding: 18px;
  float: right; }

.left {float: left; }
.right {float: right; }
.c {clear: both; }
</style>

</head>
<body>

<div id="page-wrap">

    <div id="sidebar">
            SIDEBAR
    </div>

    <div id="chat-wrap">

        <div id="chat-area">

            <div id="loading">connecting to server...</div>

        </div>

    </div>

    <div class="c"></div>

    <form id="send-message-area">
        <div>
            <table border="0" width="100%" cellpadding="0" cellspacing="0">
            <tbody><tr><td align="left" width="98%" style="padding-right:5px;">
                <textarea tabindex="1" maxlength="2000" id="entry"></textarea>
            </td><td align="right">
                <input id="entry-btn" type="button" value="Send">
            </td></tr></tbody></table>
        </div>
    </form>

</div>

</body>
</html>


#换页{
边缘顶部：10px；
边缘底部：10px；
宽度：100%；
/*用于侧边栏*/
右边距：-110px；
背景色：#AAAAFF；
}
#聊天总结{
边框：1px实心#eee；
利润率：0 5px 10px 0；
浮动：左；
/*边栏的边距*/
右边距：115px；
边框：1px纯红；
背景色：#600000；}
#聊天区{
宽度：100%；
高度：400px；
边框：1px实心#666；
浮动：左；
}
#边栏{
边框：1px纯绿色；
浮动：对；
宽度：110px；
填充：0px 0px 0px 5px；
}
#入口{
背景色：#ffffff；
填充物：5px；
字号：1em；
明确：两者皆有；
边框：3px实心#999；
高度：40px；
宽度：97%；}
#入口btn{
填充：18px；
float:right；}
.left{float:left；}
.right{float:right；}
.c{clear:两者；}
边栏
正在连接到服务器。。。

很长一段时间以来，我一直试图将红色框（包含聊天内容）扩展到侧边栏。如果我向该框添加100%的宽度，它总是忽略我为侧栏设置的边距，并扩展到容器框的宽度

如何将红色聊天区扩展到侧边栏（减去5像素的安全裕度）

布局是浮动的，所以我无法使用绝对测量。侧边栏应为110像素。
从聊天总结中删除float:left，并按如下方式增加右侧边距：

#chat-wrap { background-color: #600000; border: 1px solid red; margin: 0 136px 10px 0; }

非常感谢你！浮子：问题出在左边。是的。不客气。当你想同时做两个div时，只需要浮动其中一个。