float:left, margin:auto, float:right

three horizontal divs on a page

[Banaticus]

I want to set up three divs with the following styles applied to them:
[float:left; z-index:100;]
[margin:auto; z-index:200;]
[float:right z-index:100;]
This should, as far as I can tell, give me a left box, a center box and a right box, always in their proper places no matter how the window is sized -- unless the window is sized too small and then the two side boxes should slide behind the center box (which should always stay in the center).

But margin:auto is somewhat funky. I've tried telling it to display:inline, but the third box is still cleared under the second box. I've tried telling it clear:none and other things, but to no avail. It seems to me that this should work, but it doesn't. Why? And what can I do about it?

[Marshall]

Welcome to WebmasterWorld Banaticus.

The easiest way to do this, IMHO, is the following:

CSS

#wrapper {
width: whatever /* MUS be specified in px, % or em to center wrapper */
height: 100%;
margin: 0 auto; /* centers div */
padding: 0; /* Optional */
text-align: left; /* IE fix */
}
#left {
width: whatever;
height: /* not necessary */
margin: 0; /* Optional */
padding: 0; /* Optional */
float: left;
}
#center {
width: whatever;
height: /* not necessary */
margin: 0; /* Optional */
padding: 0; /* Optional */
float: left;
}
#right {
width: whatever;
height: /* not necessary */
margin: 0; /* Optional */
padding: 0; /* Optional */
float: left;
}

HTML

<div id="wrapper">
<div id="left">LEFT</div>
<div id="center">CENTER</div>
<div id="right">RIGHT>/div>
</div> <!-- ends wrapper -->

You can assign whatever widths are necessary, but remember, the width of the elements, margins, padding and borders cannot exceed the width of the #wrapper.

Add to CSS

body {
margin: 0;
padding: 0;
}

to a) flush the #wrapper to the top of the page and b) have uniform margin setting across multiple browsers. If you add this and want the #wrapper not flush, change the #wrapper margin to:

margin: 10px auto 0 auto; /* 10px used as example */

Marshall

[Setek]

This is probably more likely a case of content order :)

So, you want this...

--------- . ------------- . ---------
¦.......¦ . ¦...........¦ . ¦.......¦
¦.float.¦ . ¦...block...¦ . ¦.float.¦
¦.left..¦ . ¦...........¦ . ¦.right.¦
--------- . ------------- . ---------

But to achieve it you're placing your content like this:

---------
¦.......¦
¦.float.¦
¦.left..¦
---------
-------------
¦...........¦
¦...block...¦
¦...........¦
-------------
---------
¦.......¦
¦.float.¦
¦.right.¦
---------

Problem is, the right floated box is only rendering past the block-level middle box, so it is floating to the right, but it has nothing to the left of it (because the third element itself only starts after the end of the middle element.)

Switch your right floated box to be the second object (not the third) and see how that looks.

---------
¦.......¦
¦.float.¦
¦.left..¦
---------
---------
¦.......¦
¦.float.¦
¦.right.¦
---------
-------------
¦...........¦
¦...block...¦
¦...........¦
-------------

[edit]

Marshall beat me to it with a different solution :)

Marshall that would work, but only really if it's a fixed-width solution... going by the OP, I'm guessing it's a liquid-layout, so the middle content has to stretch with the viewport width.

[/edit]

[edited by: Setek at 5:00 am (utc) on Oct. 9, 2007]

[Marshall]

Marshall that would work, but only really if it's a fixed-width solution... going by the OP, I'm guessing it's a liquid-layout, so the middle content has to stretch with the viewport width.

This can be done either fixed, fluid or both, both meaning one or two of the <div>'s are fixed or liquid while the other(s) are the opposite. I use this method all the time. The trick is setting the widths of the inner <div>, but it is not that difficult. Generally, if you using % or em, I find it easier and safer to make the inner <div> total 3% less than the #wrapper, say 19% 59% 19%. Just my 2 cents worth.

And the #right can be floated right rather than left in the layout I provided.

Marshall

[Banaticus]

Thanks. When I shrink the browser window horizontally, IE displays the three boxes like this:

[one][three]
 [two]

But Firefox is just plain wierd. <sorry no screenshots please>
Look at {A} first. As the screen slides, div2 is indeed laid on top of div1 and div3. But the text "two" is bumped down below everything! (B) If I bring up the bottom of the browser (C), "two" is bumped back into the div and div3 is bumped below them (they don't squeeze any further from this point). But if I drop the bottom of the browser again, div2 is fully laid on top of div1, covering up the "one", but "two" is still down below everything, even below div3 which appears to display correctly. I don't know why the text for div2 seems to have become disassociated with its div. I don't know about you, but when I shrink the browser window horizontally, "two" jumps all over the place.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>blah</title>
 <style type="text/css">
div {
position:relative;
background-color:#FFFF00;
text-align:center;
width:100px;
height:100px;
border-style:solid;
}
 </style>
</head>
<body>
<div id="one" style="float:left; z-index:100;">one</div>
 <div id="three" style="float:right; z-index:100;">three</div>
 <div id="two" style="margin:auto; z-index:300;">two</div>
</body>
</html>

[edited by: encyclo at 12:25 am (utc) on Oct. 11, 2007]