CODEWITHSUNDEEP
htmlcss
Jake Wilson
Jake Wilson

Reputation: 91193

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?

Upvotes: 48

Views: 92774

Answers (4)

Nux
Nux

Reputation: 10002

Using display:inline-block might not work as expected with elements of variable height.

So you might want to use:

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

See: demo of both -- inline and float-float.

Upvotes: 18

llxxff
llxxff

Reputation: 344

You could give float: right to the outer div. And the display style of the inner div is inline-block

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

Upvotes: 4

Nick Beranek
Nick Beranek

Reputation: 2751

Float your elements to the left.

  <div>
    <div style="float: left; position: relative; width: 200px;">Left</div> <!-- dummy width -->
    <div style="float: left; position: relative; width: 200px;">Middle</div> <!-- dummy width -->
    <div style="float: left; position: relative; width: 200px;">Right</div> <!-- dummy width -->
  </div>

Also, you'll need to specify the width for each of these divs.

What is your reasoning behind floating them to the right?

Upvotes: -8

Didier Ghys
Didier Ghys

Reputation: 30666

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

Upvotes: 88

Related Questions