Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML CSS

Problems in floating property

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

Moderators: macek, egami, gesf

Problems in floating property

Postby muktaking » Mon Sep 26, 2011 9:55 pm

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???
muktaking
New php-forum User
New php-forum User
 
Posts: 3
Joined: Mon Jul 25, 2011 4:27 am

Re: Problems in floating property

Postby L33R » 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;
float:right;
}
#main {
background-color: black;
width: 200px;
height: 150px;
}
User avatar
L33R
New php-forum User
New php-forum User
 
Posts: 133
Joined: Fri Dec 30, 2011 4:27 am
Location: Liverpool

Re: Problems in floating property

Postby phpdhanapal » Fri Feb 17, 2012 10:41 pm

Simple, You will give #main { width: 400px; } but u r given #main { width:200px; }
that's all, 8)
phpdhanapal
New php-forum User
New php-forum User
 
Posts: 2
Joined: Fri Feb 17, 2012 10:26 pm


Return to CSS

Who is online

Users browsing this forum: No registered users and 0 guests

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.

cron