...

View Full Version : Prevent Floated Boxes from Jumping Underneath Each Other



TheShaner
10-23-2007, 04:54 PM
Hey all,

I've been a bit stumped on how to best achieve this and where to find this info on the web:

Say you have a fluid layout with a left navigation of 200px floated left and a right content area floated right that occupies the remaining space with width auto. Is there a way to prevent the right-floated content box from jumping underneath the left-floated navigation box in Fx2? (works in IE6 and IE7) I've noticed when I put a 200px margin-left on the content box, it still remains underneath the left float in Fx2, even though there is room above it, and of course since it already works in IE6 and IE7 to begin with, it adds a 200px margin starting from the end of the left float.

Thanks,

Shane

effpeetee
10-23-2007, 04:56 PM
Hey all,

I've been a bit stumped on how to best achieve this and where to find this info on the web:

Say you have a fluid layout with a left navigation of 200px floated left and a right content area floated right that occupies the remaining space. Is there a way to prevent the right-floated content box from jumping underneath the left-floated navigation box? I've noticed when I put a 200px margin-left on the content box, it sets a margin 200px from the left-floated nav, rather than the left side of the viewport.

Thanks,

Shane

Which browser?

http://www.digital-web.com/articles/web_design_101_floats/

Might help you.

Frank

abduraooft
10-23-2007, 05:11 PM
A link to your page would be helpful.

TheShaner
10-23-2007, 05:31 PM
I don't have my page up, so i can't link, but the question is something that's easily duplicated.

<!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" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css" media="all">
*
{
margin: 0;
padding: 0;
}
div#top
{
width: 100%;
background-color: #fcc;
color: #000;
}
div#container
{
background-color: #ccf;
color: #000;
}
div#left
{
float: left;
width: 200px;
background-color: #ffc;
color: #000;
}
div#right
{
float: right;
width: 100%;
background-color: #cff;
color: #000;
}
div#footer
{
width: 100%;
background-color: #cfc;
color: #000;
}
.clearing
{
clear: both;
visibility: hidden;
width: 0;
height: 0;
margin: 0;
padding: 0;
line-height: 0;
font-size: 0;
}
</style>
</head>
<body>
<div id="top">Top</div>
<div id="container">
<div id="left">Left</div>
<div id="right">Right test Right test Right test Right test Right test Right test Right test Right test Right test Right test Right test Right test Right test Right test Right test Right test Right test</div>
<div class="clearing">&nbsp;</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
My first post is a slightly off in my explanation, so this should further clarify. With the above code, Fx2, IE6, and IE7 all put the right content box underneath the left nav. When I switch the width from 100% to auto on the right content box, IE6 and IE7 will fill out as much of the right side as there is content without sliding underneath the left nav box. However, in Fx2, the right content box still remains underneath the left nav box. If I put a left margin of 200px while the width is on auto, IE6 and IE7 will put 200px from the left nav box while Fx2 will push 200px from the left side of the viewport but again, still remain underneath the left nav box.

-Shane

abduraooft
10-23-2007, 05:40 PM
div#right
{
float: right;
width: 100%;
background-color: #cff;
color: #000;
}
Edit: remove float and width.
Then add margin-left:200px; to it.

TheShaner
10-23-2007, 05:55 PM
I saw your original post about removing width, but that just sets width to auto, which was the other problem. But I didn't even think about removing the float property totally. That works great. Thanks!

-Shane

_Aerospace_Eng_
10-23-2007, 06:11 PM
You may notice that IE6 has a 3px gap in between the float and the non-floated element. To find the solution for that read this: http://www.positioniseverything.net/explorer/threepxtest.html

TheShaner
10-23-2007, 07:23 PM
Now that you point that out, i do notice it, but luckily pixel precision isn't a must with my layout in this case and can easily be left alone. I will definitely take a look at that link though for future reference.

-Shane



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum