PDA

View Full Version : [CSS] Float IN div


evildrummer
March 12th, 2007, 07:02 PM
I am not a CSS wizard but I am ok at it, and in this latest project I have nested divs:


<div id="paper">
<div id="left" />
<div id="right">
<insert lots of table code>
</div>
</div>

But when I have the right div float:right; it leaves the 'paper' div, so when I apply a BG of white to paper the right div doesnt get it, so my question is how can I keep the right and left div in the paper yet still use float to keep them next to each other?

Any advice will greatly be appreciated :tie:
Icy Penguin
March 13th, 2007, 03:05 AM
:x Could you post an example? I'm kind of confuzzled.
simplistik
March 13th, 2007, 09:28 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#paper { width: 600px; height: 400px; background: #000; }
#left { width: 400px; height: 350px; float: left; background: #0099ff; }
#right { width: 200px; height: 300px; float: right; background: #ff0000; color: #fff; }
</style>
</head>


<body>
<div id="paper">
<div id="left">
<p>yay... left side</p>
</div>

<div id="right">
<code>mmm code</code>
</div>
</div>
</body>
</html>


next time post all your code, but it's more than likely you either have some type of padding on your left and right divs... in which case you need to remove the width outta the left and right div equal to the total left and right padding.
evildrummer
March 13th, 2007, 11:48 AM
When I get home i'll follow your suggestions simp and then if that doesnt work I'll post more code. Its just that when I set the right and left to float the right DIV doesnt inherit the background-color of the parent DIV (paper)
fasterthanlight™
March 13th, 2007, 12:04 PM
if thats the case you might want to try this workaround

It might not do the trick in your case, who knows


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#paper { width: 600px; background: #000; }
#left { width: 400px; height: 350px; float: left; background: #0099ff; }
#right { width: 200px; height: 600px; float: right; background: #ff0000; color: #fff; }
</style>
</head>


<body>
<div id="paper">
<div id="left">
<p>yay... left side</p>
</div>

<div id="right">
<code>mmm code</code>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>


[Updated simp's code, took out some height declarations, #paper's height will stretch to whatever div's height is the largest]



Basically, when you float something, it kind of slices the div out of the page and floats it on top, so a lot of the time, any nested floats won't inherit the background colour or image of the parent div, so, if you add an empty div with a clear:both; after your floated divs, the parent div should expand until the end of the empty div.
evildrummer
March 13th, 2007, 01:26 PM
^ Thank you, its working, I didnt know float floated on top I just thought it only floated to sides, I knew position:absolute does something similar.
fasterthanlight™
March 13th, 2007, 02:45 PM
yea.... but then you gotta concern yourself with pixel values and all that jazz, and once you code your site, anything position:absoluted is a paint to update or modify
simplistik
March 13th, 2007, 03:41 PM
if thats the case you might want to try this workaround

It might not do the trick in your case, who knows


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#paper { width: 600px; background: #000; }
#left { width: 400px; height: 350px; float: left; background: #0099ff; }
#right { width: 200px; height: 600px; float: right; background: #ff0000; color: #fff; }
</style>
</head>


<body>
<div id="paper">
<div id="left">
<p>yay... left side</p>
</div>

<div id="right">
<code>mmm code</code>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>


[Updated simp's code, took out some height declarations, #paper's height will stretch to whatever div's height is the largest]



Basically, when you float something, it kind of slices the div out of the page and floats it on top, so a lot of the time, any nested floats won't inherit the background colour or image of the parent div, so, if you add an empty div with a clear:both; after your floated divs, the parent div should expand until the end of the empty div.

yea heights were just there to show the tiers :)...

but outside of that, here is a tip. don't put your clearing element on a block layer element. block layer elements are supposed to have some type of content in it. while it doesn't error out and it does do what you want it to do. it's better form/practice to use something that doesn't expect to have content in it.

what I always do is apply it to a break... cause you are infact trying to break after the floating. so in all my css you'll see


.clear { height: 1%; margin: 0; padding: 0; clear: both; }

then apply it like this:


<br class="clear" />
fasterthanlight™
March 13th, 2007, 04:07 PM
Touché