Окраска ровных колонн - PullRequest
Новая
       11

Окраска ровных колонн

0 голосов
/ 22 мая 2010

Я пытаюсь установить разные цвета фона для левого и правого столбцов и поддерживать одинаковую высоту.
Поэтому я установил цвет фона для внешней оболочки (div "container"), чтобы он установил цвет на rightBar.

Но это не сработало. Демоверсия

Я хочу, чтобы он работал во всех браузерах.

Markup: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>Test</title>
  </head>
  <body>
    <div class="contentcontainer">
    <div class="container">
       <div class="mainBar">                  
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>            
       </div>
       <div class="rightBar">                
                    <p>BAR Text BAR Text BAR Text</p>
                    <p>BAR Text BAR Text BAR Text</p>
                    <p>BAR Text BAR Text BAR Text</p>
                    <p>BAR Text BAR Text BAR Text</p>
                    <p>BAR Text BAR Text BAR Text</p>
                    <p>BAR Text BAR Text BAR Text</p>
                    <p>BAR Text BAR Text BAR Text</p>
                    <p>BAR Text BAR Text BAR Text</p>
                    <p>BAR Text BAR Text BAR Text</p>
                    <p>BAR Text BAR Text BAR Text</p>
       </div>
    </div>
 </div>
  </body>
</html>

CSS: 

body
{
    font-family: Verdana,Tahoma,Arial, "Trebuchet MS" ,Sans-Serif,Georgia,Courier, "Times New Roman" ,Serif;
    margin: 0px;
    padding: 0px;
    background: repeat-x scroll center bottom #C4DAE9;
    text-align:center;
}
.contentcontainer
{

}

.container
{
    margin-left: auto;
    margin-right: auto;
    margin-top:5px;
    width: 99%;
    text-align: left;
    background-color:Gray;
    clear:both;

}
.mainBar
{

    width:70%;
    float:left;
    background-color:White;

}

.rightBar
{
    width:30%;
    float:left;

}

Ответы [ 3 ]

0 голосов
/ 22 мая 2010

Перемещая два внутренних бара, вы выводите их из обычного потока документов.В результате содержащая ячейка container фактически не имеет содержимого и высоты.

Добавив overflow:hidden к .container, вы можете решить эту проблему, но тогда у вас возникнут проблемы, если правильноbar выше, чем левая.

Я также думаю, что для того, чтобы он работал в IE6, вам может потребоваться добавить zoom:1 к .container, но вам придется это попробовать.

0 голосов
/ 22 мая 2010 
.rightBar
{
    width:30%;
    float:left;
    height: 100%;
    background-color: red;
}

также установите высоту родительского элемента «контейнер» на любое значение ...

0 голосов
/ 22 мая 2010

Вы должны очистить поплавки в конце контейнера. Один из способов: 

    ...
    <div class="rightBar">
        ...
    </div>
    <br style="clear: both;">
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...