Sidebar and Container width CSS problem

Question

I have a simple page for a chat system. Test page can be found here: http://komasurfer.com/chat-test/

Here's the code:

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

I've been trying for a very long time now to get the red box (with the contents of the chat) to expand to the sidebar. If I add a width of 100% to that box, it always disregards the margin that I set for the sidebar and expands to the width of the container box.

How can I make the red chat area expand to the sidebar (minus a safety margin of 5 pixels)?

The layout is a floating one, so I cannot work with absolute measurements. And the sidebar should be 110 pixels.

Answer 1

Remove float:left from chat-wrap and increase the right margin like this:

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

Sidebar and Container width CSS problem

Question

1 answers

solution1
1 ACCPTED 2010-12-17 08:45:54

Sidebar and Container width CSS problem

Question

1 answers

solution1 1 ACCPTED 2010-12-17 08:45:54

solution1
1 ACCPTED 2010-12-17 08:45:54