1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

Проблемы с правой колонкой в трехколоночном макете [Решено]

Главные вкладки

Аватар пользователя puhur01 puhur01 7 июля 2012 в 1:15

Добрый вечер. Помогите, пожалуйста, разобраться со следующей проблемой.
Нужно сверстать трехколоночный макет (два сайдбара по бокам основного контента 168px-464px-168px). Почему-то левая колонка и основной контент располагаются на одном уровне, тогда как правая колонка располагается над футером, поэтому создается впечатление, что она съехала вниз. Проблема решается добавлением свойства position (значения relative для обертки и absolute для внутренних дивов), но в этом случае футер всплывает наверх почему-то.
Вот div-разметка страницы:

<div id="page_wrapper">
        <header id="header" > <!-- шапка сайта -->
        </header>
   
        <div id="basic">  
                <div id="left_column"> <!-- левая колонка -->
                </div>
                       
                <div id="article_wrapper"> <!-- средняя колонка -->
                </div>
                       
                <div id="right_column"> <!-- правая колонка  -->
                </div>
        </div>
 
        <footer> <!-- подвал сайта  -->
        </footer>
</div>

Так выглядит css:

#page_wrapper{
    margin: 0 auto;
    width: 800px;
    overflow: hidden;
}

header{
    width: 800px;
}
 
#basic{
    position: relative;
    margin: auto;
    width: 100%;
}
#left_column{
    width: 168px;
    position: absolute;
}
#article_wrapper{
    margin-left: 168px;
    width: 464px;
    position: absolute;
}
#right_column{
    margin-left: 632px;
    width: 168px;
    position: absolute;
}

footer{
    font-size: 10px;
    color: #aaa;
    background: #fff;
}

UPD Задача решена. Вот решение: в див-разметке можно убрать обертку basic, а css оформляется следующим образом:

#page_wrapper{
    margin: 0 auto;
    width: 800px;
    font-family: Arial;
}

header{
    width: 100%;
}

#left_column{
    width: 168px;
    float: left;
}
#article_wrapper{
    margin-left: 168px;
    margin-right: 168px;
}
#right_column{
    width: 168px;
    float: right;
}

footer{
    font-size: 10px;
    color: #aaa;
    background: #fff;
}

И вот еще другой вариант решения, с оберткой basic (она потребуется для дальнейшего растягивания сайдбаров до футеров по этому уроку http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-cs...):

#page_wrapper{
    margin: 0 auto;
    width: 800px;
    font-family: Arial;
}

header{
    width: 100%;
}

#basic{
    float: left;
    width: 100%;
}
#left_column{
    width: 21%;
    float: left;
}
#article_wrapper{
    width: 58%;
    float: left;
}
#right_column{
    width: 21%;
    float: left;
}

footer{
        clear: both;
        font-size: 10px;
        color: #aaa;
        background: #fff;
}

Комментарии

Аватар пользователя sg85 sg85 7 июля 2012 в 1:42

для фикс ширины верстки можно так:

#page_wrapper{
    margin: 0 auto;
    width: 800px;
}
 
#left_column{
    margin: 0;
    width: 168px;
    float: left;
}
#article_wrapper{
    margin: 0;
    width: 464px;
    float: left;
}
#right_column{
    margin: 0;
    width: 168px;
}
 
#footer{
    font-size: 10px;
    color: #aaa;
    background: #fff;
}

div basic нафиг не нужен

Аватар пользователя puhur01 puhur01 7 июля 2012 в 12:48

sg85, так не получается. Футер висит на одном уровне с основным контентом, а правая колонка под левой.

Почему-то правая колонка воспринимается как отдельный блок типа футера и располагается над футером соответственно. Левая колонка и основной контент располагаются на одном уровне.

Аватар пользователя sg85 sg85 7 июля 2012 в 17:52

ну так их можно запихнуть в один див
т.е. див с футером выводить внутри дива article_wrapper последним, т.е. перед закрытием родительского тега.

З.Ы. Футеру имеет смысл задать высоту, если он, конечно, не является динамическим

<div id="page_wrapper">
        <div id="header" > <!-- шапка сайта -->
        </div>
 
        <div id="left_column"> <!-- левая колонка -->
        </div>
 
        <div id="article_wrapper"> <!-- средняя колонка -->
            <div id="footer"> <!-- подвал сайта  -->
            </div>
        </div>
 
        <div id="right_column"> <!-- правая колонка  -->
        </div>
 
</div>