Mala Mala - 4 months ago 13
HTML Question

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

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

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...