ansaurus

Question

centering a div between one that's floated right and one that's floated left

Answer 1

+6 A:

If you have two floated divs, then you know the margins. The problem is that the float:right div should be put before the middle div. So basically you will have:

left-floated | right-floated | centered

Now, about the margins: usually you can just use margin:0 auto, right? The problem is that right now you know the values of the margins: floated divs! So you just need to use:

margin:0 right-floated-width 0 left-floated-width

That should work...

Ionut Staicu 2010-07-03 20:17:39

This worked perfectly. Thanks!

Mala 2010-07-03 20:20:14

well, almost, anyway - now i have [left][center][variable-space-depending-on-window-size][right]. How would I center the middle-part between the two side-parts?

Mala 2010-07-04 00:05:45

Answer 2

+2 A:

Indeed, the important part is that the centered div come after the left and right divs in the markup. Check out this example, it uses margin-left: auto and margin-right: auto on the centered div, which causes it to be centered.

<html>
<head>
    <style type="text/css">
        #left
        {
            float: left;
            border: solid 1px red;
        }

        #mid
        {
            margin-left: auto;
            margin-right: auto;
            border: solid 1px red;
        }

        #right
        {
            float: right;
            border: solid 1px red;
        }
    </style>
</head>

<body>
    <div id="left">
        left
    </div>

    <div id="right">
        right
    </div>

    <div id="mid">
        mid
    </div>
</body>
</html>

Samuel Meacham 2010-07-03 20:27:06

Thanks for the suggestion! However, this centers the middle div relative to the page and not its "neighbors"

Mala 2010-07-05 00:00:01

Answer 3

A:

Try this (make sure to use better class names):

.left {
 float:left;
 width:200px;
}
.right{
 float:right;
 width:200px;
}
.center {
 overflow:hidden;
 zoom:1;
}

The center div will fit between the two floats.
If you want to create a gutter between that centered div and the two floats, then use margin on the floats, not on the center div.

Because of "zoom", the CSS will not validate, but that layout will work in IE 5.5 and 6.

Note that source order is important here: the two floats must come first, then your "centered" div.

Thierry Koblentz 2010-07-04 05:30:48

ansaurus

tags:

views:

answers:

centering a div between one that's floated right and one that's floated left

related questions