64

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.

Improve this question
2
  • 1
    Can you post your current CSS and HTML? Will help with the debugging process.
    – xil3
    Commented Jul 3, 2010 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
    Commented Jul 3, 2010 at 20:17

7 Answers 7

Reset to default
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.

Improve this answer
7
  • 1
    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
    Commented Jul 4, 2010 at 0:05
  • @Mala, see my example and answer below.
    – user1357678
    Commented Aug 22, 2013 at 19:03
  • 4
    Years later, I still refer to this.
    – invot
    Commented Nov 7, 2014 at 0:12
  • Thanks this really helped me!
    – Andres Elizondo
    Commented Jan 27, 2017 at 12:36
  • Thanks for the update about the flexbox. Really helped more than anything!
    – Aamir
    Commented Apr 5, 2017 at 3:12
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

Improve this answer
1
  • 2
    Thanks for the suggestion! However, this centers the middle div relative to the page and not its "neighbors"
    – Mala
    Commented Jul 5, 2010 at 0: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;
}
Improve this answer
1
  • Good but doesn't account for custom width of middle element.
    – tblev
    Commented Aug 3, 2020 at 22:12
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/

Improve this answer
3
  • 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
    Commented Sep 19, 2013 at 4:27
  • Seems to work just fine from here: jsfiddle.net/calvintennant/dBz5d The content that you're centring needs to be display: inline or display: inline-block.
    – user1357678
    Commented Sep 20, 2013 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
    Commented Jul 15, 2015 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.

Improve this answer
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.

Improve this answer
-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/

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.