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

Floating an element automatically makes it into a box. (See: http://css.maxdesign.com.au/floatutorial/introduction.htm ) However, there is nothing semantically incorrect about it. Semantics don’t dictate what should be displayed as a block and what should be displayed inline–that’s one reason we can declare that arbitrarily. (It certainly becomes messy when you start taking words out of their order–but I doubt that’s what you’re talking about here, as I can’t imagine a case when you’d want to do that and have it remain inline.)

Moreover, if you need to align a bit of inline text independent from the flow of normal text (which is what a float does), you really want to display it as a block anyway. If it’s really an inline element, all you need is text-align:right–anything you need a float or a position declared on you are already treating as a block element, so there’s nothing wrong with declaring it as such.