1

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?

1
  • check the html code div one : no ID div two : DIV1 div three : DIV1
    – MCSI
    Jan 17, 2012 at 2:23

3 Answers 3

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

There is a simple explanation.

Floating an element means you take it out of the normal flow of elements, and non-floated elements will not make room for it.

Thus, when a container only has child elements which are floated, the container will not take the height or width of its children.

To make this work intuitively, meaning making the container take the width and height of its children, you can either float the container, or use one of the several methods for clearing floats.

My preferred solution is to use overflow: hidden on the container, if floating it doesn't work in your scenario. overflow: hidden will work in most simple cases.

0
0

Instead of using float: left...use display:inline;

<style>
  #container{margin:0 auto;width:950px;opacity: .5;filter: alpha(opacity = 50);background: #fff;text-align:center;}
  #container div{display:inline;}
</style>
<div id="container">
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
    <div class="div3">Div 3</div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.