Question

How can I center the second element in a div without knowing the width of the first.

I want “foo” to float to the left and “bar” to be centered in the original div. I can do this if I know the width of “foo”:

<div>
    <span style="float:left;">foo</span>
    <span style="margin-left:-10px;">bar</span>
</div>

Is there another way to do this, without margin-left set to a static width?

Answer 1

Center of the parent div?

<div>
    <span id="f"> foo  foo  foo  foo  foo  foo  foo  foo </span>
    <span id="c">bar</span>
</div>

CSS:

#f{
    float:left;
}
#c{
    display:block;
    margin: 0 auto;
    width:100px;
}