How to achieve the float:right effect while preserving the inline-block display?

Question

Consider the following jsFiddle: http://jsfiddle.net/mark69_fnd/yqdJG/1/

HTML:

<div id="container">     <div class="char">         AAA     </div>     <div class="char stickToRight">         BBB     </div> </div>​ 

CSS:

#container {     border:solid 2px green } .char {      display: inline-block;     border: solid 2px red; } .stickToRight {     float: right }​ 

Is there another way to make .stickToRight be aligned right, without floating it?

I need to keep it as display:inline-block so that I can make its vertical alignment consistent with other .char elements.

How can I achieve the float:right right-alignment effect, whilst keeping the element display:inline-block? (Note that I do not know the width of the container element.)

I'd like purely CSS solutions, if there are any.

Answer 1

I was having the same problem, and found out using direction: rtl; on the container is the best solution. https://css-tricks.com/almanac/properties/d/direction/

Answer 2

An element can’t be inline-block and floated at the same time.

When an element is set to inline-block, it differs from display:inline elements in that it can have a width and height specified. However, it’s still part of the inline layout flow — its horizontal position is determined by its source order and the text-align property of its block-level parent, and its vertical position with the line is determined by the vertical-align property.

When an element is floated, it’s no longer part of the inline layout flow. Its horizontal position is determined by whether it’s floated left or right, and whether there are other floated elements before it, and its vertical position is determined by a fairly involved set of rules that Eric Meyer describes really well in CSS: the Definitive Guide, but that basically boil down to “the top of the inline box in which it would have appeared if it wasn’t floated”.

I’m still not quite sure what visual effect you’re imagining when you say you want the element to be floated and inline-block at the same time, but float layout is different from inline-block layout in terms of both horizontal and vertical position, and there isn’t any way to combine them.