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/