Question

i have one div that contain three div for a part in my website
code is like this:

<div id="container">
<div ></div>
<div id="div1"></div>
<div id="div1"></div></div>

in css :

#container {
margin: 0 auto;
width: 950px;
opacity: .5;
filter: alpha(opacity = 50);
background: #fff;}

#div1 {
width: 100%;
height: 30px;
background: black;
float: left;}

#div2 {
margin:50px 0 50px 0;
width: 950px;
float: left;}

#div3 {
border: 1px solid black;
width: 437px;
height: 532px;
margin: 18px;
float: left;}

when i remove the float:left form the #container
then it’s height will not be zero using firefox
but when i add it back,it’ll work correctly but i can not center the boy in browser window.

how can i fix this?

Answer 1

Use a clear div. That will allow your container to adapt to the height of the floated elements. Also you had some errors in your CSS.

“#.” is not how you declare an ID.

Additionally, the ID in your HTML needs to match the ID in your CSS 100%, case sensitive. In your HTML you had id="contianer", but in your css, #container

.clear {
    clear:both;
    display:block;
    overflow:hidden;
    visibility:hidden;
    width:0;
    height:0!important
}

#container {
    margin: 0 auto;
    width: 950px;
    opacity: .5;
    filter: alpha(opacity = 50);
    background: #fff;
}
#div1 {
    width: 100%;
    height: 30px;
    background: black;
    float: left;
}

#div2 {
    margin:50px 0 50px 0;
    width: 950px;
    float: left;
}

#div3 {
    border: 1px solid black;
    width: 437px;
    height: 532px;
    margin: 18px;
    float: left;
}

<div id="container">
    <div ></div>
    <div id="div1"></div>
    <div id="div2"></div>
    <div class="clear"></div>
</div>