63

I have a page in which a header consists of three divs - one that's floated to the left, one that's floated to the right, and one that's in between them. I'd like for that central div to be centered, yet sadly float: center doesn't exist and I can't just float it to the left and add padding as it'd have to change depending on the window size.

Is there something simple I'm overlooking? Or how would I do such a thing?

Update:
In addition, I'd like to find a way of centering that middle div in the space between the divs in case that looks better.

Mala
  • 14,178
  • 25
  • 88
  • 119
  • 1
    Can you post your current CSS and HTML? Will help with the debugging process. – xil3 Jul 03 '10 at 20:14
  • It's more of a general type of thing - how to float one element to the left of the page, one element to the right of the page, and one centered in the middle all on the same line – Mala Jul 03 '10 at 20:17

7 Answers7

65

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.

Years later edit

Meanwhile, a new toy is in town: flexbox. The support is fairly good (i.e. if you don't need to support lower than IE 10) and the ease of use is way over floats.

You can see a very good flexbox guide here. The example you need is right here.

Ionuț Staicu
  • 21,360
  • 11
  • 51
  • 58
42

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>

Here's a JS Bin to test: http://jsbin.com/agewes/1/edit

Leniel Maccaferri
  • 100,159
  • 46
  • 371
  • 480
Samuel Meacham
  • 10,215
  • 7
  • 44
  • 50
  • 2
    Thanks for the suggestion! However, this centers the middle div relative to the page and not its "neighbors" – Mala Jul 05 '10 at 00:00
6

Usually you can use flexbox instead of floats:

https://jsfiddle.net/h0zaf4Lp/

HTML:

<div class="container">
    <div>left</div>
    <div class="center">center</div>
    <div>right</div>
</div>

CSS:

.container {
   display: flex;
}

.center {
    flex-grow: 1;
}
Leo
  • 1,753
  • 3
  • 20
  • 23
4

The element with the centered content needs to be specified after both floated elements. After that, simply set the middle element to text-align: center. The text in the centered element will squeeze in between the floats.

See here: http://jsfiddle.net/calvintennant/wjjeR/

  • The problem is that this only works on text, and so is not applicable if, for example, one wants to center an image between two floated divs – TheEnvironmentalist Sep 19 '13 at 04:27
  • Seems to work just fine from here: http://jsfiddle.net/calvintennant/dBz5d/ The content that you're centring needs to be `display: inline` or `display: inline-block`. –  Sep 20 '13 at 15:52
  • can you explain WHY this is? like why do you have to put the centered last? I don't know how to even going about to look up the "why" on this. I just want to know for future reference – carinlynchin Jul 15 '15 at 13:11
2

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
  • 201
  • 1
  • 4
0

In some cases, you have a limitation and cannot change the page markup by moving the middle div after the right-floated div. In that case, follow these instructions:

  1. For container: position: relative
  2. For middle div: position: absolute; left: [containerWidth - middle-width / 2]

I hope you got the idea.

Tengiz
  • 8,011
  • 30
  • 39
-2

A simple solution without having to change the order of the divs (sometimes we can not do this) could be an absolute positioning for the center div as follows:

.container {
  position: relative;
}
.container div {
  width: 200px;
  background: red;
}
.left {
  float: left;
}
.right {
  float: right;
}
.center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}
<div class="container">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>
https://jsfiddle.net/Helioz/nj548y0g/
MVP
  • 1
  • 1
  • 2