Jake Wilson Jake Wilson - 3 days ago 4
CSS Question

Float div's to the right in left-to-right order?

I have multiple div's I want to display in a horizontal row. Normally, the way I'd do this is to simply float them to the right and put them in the markup in reverse order like so:

<div>
<div style="float:right">Right</div>
<div style="float:right">Middle</div>
<div style="float:right">Left</div>
</div>


I'm trying to accomplish a similar thing, float div's to the right, but I can't reverse their order in the markup for SEO reasons. The left div needs to be first in the code.

Is there a simple way to do this without resorting to positioning things absolutely?

Answer

You could apply a text-align: right to the container and a display: inline-block in place of the floating:

<div style="text-align: right">
  <div style="display:inline-block">Left</div>
  <div style="display:inline-block">Middle</div>
  <div style="display:inline-block">Right</div>
</div>

DEMO