Question

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.

Answer 1

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.