Проблема CSS с шириной боковой панели и контейнера - PullRequest
Новая
       27

Проблема CSS с шириной боковой панели и контейнера

0 голосов
/ 17 декабря 2010

У меня есть простая страница для системы чата. Тестовую страницу можно найти здесь: http://komasurfer.com/chat-test/

Вот код: 

<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 пикселей.

1 Ответ

1 голос
/ 17 декабря 2010

Удалите float: left из chat-wrap и увеличьте правое поле следующим образом: 

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