мои дивы не выровняются правильно. Зачем? - PullRequest
Новая
       5

мои дивы не выровняются правильно. Зачем?

4 голосов
/ 05 февраля 2012

Эта веб-страница прекрасно выглядит в Dreamweaver, но когда я просматриваю ее в любом браузере, 3 столбца находятся не внутри идентификатора оболочки. Это даже не появляется. Я не могу понять, почему.

Это мой HTML код 

<body>
    <div id="wrapper">
        <div id="header">
            <div id="menu"></div>
        </div>
        <div id="wrapper2">
            <div id="leftpane"></div>
            <div id="bodycontent"></div>
            <div id="rightpane"></div>
        </div>
        <div id="footer"></div>
    </div>
</body>

вот CSS 

#wrapper {
    width: 900px;
    background-color: #666;
    margin-right: auto;
    margin-left: auto;
}
#wrapper #header #menu {
    background-color: #00F;
    height: 50px;
    width: 900px;
    position: relative;
    top: 150px;
}
#wrapper #header {
    background-image: url(../images/index_03.gif);
    height: 200px;
    width: 900px;
}
#wrapper2 {
    position:relative;
    width:900px;
    background-color:#999;
    height:auto;
}
#leftpane {
    width:200px;
    height:347px;
    background-color:#C96;
    left:0px;
    top:0px;
    margin:5px;
    float:left;
}
#rightpane {
    width:200px;
    height:347px;
    background-color:#C96;
    margin:5px;
    float:right;

}
#bodycontent {
    width:400px;
    margin:5px;
    height:347px;
    background-color:#C96;
    float:left;
}
#footer {
    width:900px;
    height:80px;
    background-color:#0C6;
}

Пожалуйста, кто-нибудь может мне помочь в этом?

1 Ответ

2 голосов
/ 05 февраля 2012

Судя по всему, вы не очищаете свои всплывающие #wrapper2 элементы. Попробуйте очистить упаковку так: 

#wrapper2:before, #wrapper2:after {
    content:"";
    display:table;
    zoom:1; /* ie fix */
}

#wrapper2:after {
    clear:both;
}
...