Question

This fiddle demonstrates the problem.

I’m trying to align an image and a button to the right, on two separate lines, as a joint unit. I created a wrapper div (“right-stuff”), with position:relative, so I can use position:absolute on its child, the button.

The problem is I don’t know of a good way to align the button to the right without hurting the height calculations.

What I did is give it position:absolute and right:0, but this removes it from the flow, and causes the container (“right-stuff”) not to include it – see how the red background doesn’t reach it, although it “should”.

Another problem is that the next item in the flow after “right-stuff” will need a margin-top to be in the correct position, or otherwise I have to either give “right-stuff” a width I calculate myself, or an artifical margin (that takes into account the button height). Too much knowledge here.

Is there a better way to get both items to act as a coherent unit, that is “right aligned”, but without taking things out of the flow?

Obviously this is not the first time someone has asked this question, but I haven’t found an answer here that addresses these specific concerns without ugly hacks (like manually adding a margin-bottom equal to the button’s height).

Edit: text-align is a decent solution (better than what I thought of anyway). One caveat: It assumes the button is indeed textual, and doesn’t work on the image itself. This is ok in my example because the image is the widest thing in the container – but what if I had another element in the container that was wider than the image? How would I keep the image aligned to the right?

Answer 1

Yes, since both of those elements (img and button) are inline-block you can simply use text-align: right.