サイドバーとコンテナの幅CSSの問題

チャットシステム用の簡単なページがあります。テストページはここで見つけることができます：ここではhttp://komasurfer.com/chat-test/サイドバーとコンテナの幅CSSの問題

はコードです：

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

私が展開する（チャットの内容で）赤いボックスを取得するために、今、非常に長い時間のためにしようとしてきましたサイドバーに。このボックスに100％の幅を追加すると、サイドバーに設定した余白が無視され、コンテナボックスの幅に拡大されます。

赤いチャットエリアをサイドバーに展開するにはどうすればいいですか？（マイナス5ピクセルのマイナス）？

レイアウトはフローティングなレイアウトなので、絶対測定はできません。また、サイドバーは110ピクセルにする必要があります。

出典

2010-12-17 user478419

削除フロート：チャットラップから左と、このような右マージンを増やす：

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

出典

2010-12-17 08:45:54

ありがとうございました！フロート：左が問題だった。 – user478419

はい。どういたしまして。 2つの部門を横に並べて、そのうちの1つだけを浮かべる必要があります。 –

サイドバーとコンテナの幅CSSの問題

答えて

関連する問題