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

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 th

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.