Problems in floating property

[muktaking]

suppose, two div element have id div1,div2 respectively. They present within another div element which id is main.
Their style is below:

#div1 {
width: 200px;
height: 150px;
background-color: #33ff33;
float: left;
}
#div2 {
width: 200px;
height: 150px;
background-color: #999900;
float: right;
z-index: 100;
}
#main {
overflow: hidden;
background-color: black;
width: 200px;
height: 150px;
}

and in body element--
<div id="main">
<div id="div1">
</div>
<div id="div2">
</div>
</div>
problem is div1 comes above div2 and div2 is not shown. Why??? and why div2 don't come above div2???

[L33R]

I dont know what it is youre trying to do but heres my 5 cents worth:

Normal document flow will stack divs one on top of another.

Once you float a div, it is taken out of normal document flow.

but because youre trying to float div2 to the right of div1 its just sitting underneath it because there is no space because main has a width of 200px and so do both divs. Then you are removing it by
using overflow:hidden.

I hope you understand this ok.

to float the two divs side by side :

Code: Select all

#div1 {
width: 98px;
height: 148px;
background-color: #33ff33;
float: left;
}
#div2 {
width: 98px;
height: 148px;
background-color: #999900;
float:right;
}
#main {
background-color: black;
width: 200px;
height: 150px;
}


[phpdhanapal]

Simple, You will give #main { width: 400px; } but u r given #main { width:200px; }
that's all,