Question

Is there a way to have left-, center-, and right-aligned text on the same line with HTML/CSS, under the following conditions?

1. The left and right pieces of text will be short, but I do not know their length in advance.
2. The center piece of text may be long enough to wrap.
3. The center piece of text should appear EXACTLY in the center.
4. The center piece of text should not overlap the left or right pieces of text.

The obvious solution of using 3 divs with the two of them floating left and right works pretty well, except that the center piece of text is not centered exactly (for example, if the left piece of text is longer than the right, the center appears centered just right of the absolute center).

I only need a solution that works on WebKit. Any ideas?

Edit – This is what I have so far…

HTML:

<div id="left">Left</div>
<div id="center">Center text</div>
<div id="right">Right</div>

CSS:

#left {
    float: left;
    text-align: left;
    padding-right: 10px;
}

#center {
    text-align: center;
}

#right {
    float: right;
    text-align: right;
    padding-left: 10px;
}

Answer 1

You will need to “trick” the left column into being as wide as the right, by copying the text from the right into the left column. Why? When the center column needs to wrap in order to maintain center with respect to the whole table it will need to wrap as if both other columns are the same width. You can see this here: http://jsfiddle.net/brettwp/n5eSB/ by adjusting the size of the Result panel. Note that this does make your table one line taller due to the hidden content. I don’t know all the details of your implementation, so you will need to make adjustments (overflow hidden, negative margins, position relative, etc) to get this to fit into the page, but it should get you started:

<table>
    <tr>
        <td class="d1">
            left
            <div class="copy">right text</div>
        </td>
        <td class="d2">
            center text that is long enough to force a word wrap!
        </td>
        <td class="d3">right text</td>
    </tr>
</table>

table {
    width: 100%;
}
td {
    vertical-align: top;
}
.d1 {
    text-align: left;
}
.d2 {
    text-align:center;
}
.d3 {
    text-align:right;
}
.copy {
    visibility: hidden;
}
.copy, .d3 {
    white-space: nowrap;
}