Inline-Element Float-Right of `div`

Question

I want to right-align an inline element to the right of a div.

I have seen float="right" applied on a span to right align its position. But, it seems semantically incorrect to me, as floats are supposed to move "boxes" or block elements left or right of a container element.

Is my understanding of Float wrong or is there another way of right-aligning inline elements in a CSS-container.

Answer 1

float: right is perfectly okay applied to all elements, block-level or inline it doesn't matter, either semantically or according to the spec (so far as I'm aware).

If you want to right-align something without using float then there's the possibility of margin-right: 90%; (assuming you know that what it's right-aligned from/against fits into the other 10%.

Or direction: rtl; but that never works like I think it should, plus it'd likely complicate things.

position: absolute; right: 0; would do as you need (but it'd be removed from the document's flow, and it would be positioned against the first of its parent elements that has a defined position: relative; (or at least defined position).

You could, possibly, use text-align: right, but that seems like such a simple solution that I'm sure you'll have already tried it.

If you could provide a use-case, some code and an indication of your expected end-result we might be able to help you more.