How does one have centered text and right-floating text on the same line, when everything has dynamic widths?

Question

I have a variable size block of text, which I would like centered in a div. The width of the div is a % of its parent element, and the height is defined by padding however tall the center text is. This is easily achieved via:

<div style="width: 50%; padding: 15px; text-align: center;">
    Lorem ipsum...
</div>

That works fine.

But when I try to add the part on the right:

<div style="width: 50%; padding: 15px; text-align: center;">
    Lorem ipsum...
    <div style="float: right;">ASDF!</div>
</div>

then it counts the width of the text on the right towards the total width of the text, and puts the "ASDF!" on the right, but puts the "Lorem ipsum..." more to the left than it ought to be (as if the total length of lorem... included the asdf!).

Here's a mockup of what I'm trying to achieve:

I think this would be pretty easy with flexbox, but I want to avoid using anything recent because I need to support old browsers.

This question seems relevant, but (correct me if I'm wrong) it seems to require known widths.

How would I best go about doing this?

Answer 1

Try this:

<div class='content' style="width: 50%; padding: 15px; text-align: center; position: relative">
    <div class="noDown" style="position: absolute; right: 0;">ASDF!</div>
    Lorem ipsum...
</div>​

JsFiddle Test: http://jsfiddle.net/3Y7ty/2/

Answer 2

IE8+ Old Enough?

Building upon your fiddle, you can get what you want in IE8+. Note that the wrapper #b needs to have the box-sizing property set to get it to width: 50% including padding. Then for your floated element, just add this:

margin: 0 -15px 0 -100%;

The -15px right margin accounts for your 15px of right padding to pull the item fully to the right, and then the -100% left margin causes the preceding text to fully center.

Or IE7 Support Needed?

You mention the need to support "older browsers," but you do not give any information about how hold (IE8 is "old" now, but perhaps you refer to even older). If you need IE7 (or lower?) support, then you will need to conditionally target IE7 and use this instead:

margin: -1.2em -15px 0 0;

IE7 does not recognize the float: right the same as later browsers, and it will put it "below" the preceding text, and the -100% left margin will pull the floated element clear back to the left. So that goes away, and to pull the text up in line with the preceding text, we give it a negative top margin that should be set equal to the line-height of the font being used (which is usually going to be 1.2 or 1.1; you may want to explicitly set it on the #b container). I have not tested to see if this works in IE6.