CODEWITHSUNDEEP
csshtmlalignmentmultiple-columns
guitarlass
guitarlass

Reputation: 1617

my divs won't align correctly. why?

This webpage looks fine in dreamweaver but when I view it in any browser, 3 columns are not inside wrapper2 id. It doesn't even show up. I can't figure out why.

This is my HTML code

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

here is 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;
}

Please can someone help me on this?

Upvotes: 4

Views: 1206

Answers (1)

Andres I Perez
Andres I Perez

Reputation: 75409

From the looks of it you're not clearing your floated #wrapper2 elements. Try clearing the wrapper like so:

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

#wrapper2:after {
    clear:both;
}

Upvotes: 2

Related Questions