Problems in floating property

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: egami, macek, gesf

Post Reply
User avatar
New php-forum User
New php-forum User
Posts: 143
Joined: Fri Dec 30, 2011 4:27 am
Location: Liverpool

Tue Jan 17, 2012 6:59 pm

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;
#main {
background-color: black;
width: 200px;
height: 150px;

Post Reply