Is there any way to do div rendering from right to left HTML

Question

I have a project (calendar) and I want to convert it to Arabic. I don't know if the rendering is correct, but all I want to do is show the div from right to left.

I have a row (divs) with columns (divs). divs not text

Something like that

div1 div2 div3 div4 div5 div6 div7 div8 div9 

to

 div3 div2 div1 div6 div5 div4 div9 div8 div7 

My project is responsive, so manually placing it backwards will not work.

This is what I mean with lower resolution.

 div2 div1 div4 div3 div6 div5 div8 div7 div9 

Any solutions .. dirty or clean, hack or not, will be appreciated. Thank you in advance.:)

Answer 1

Use float: right on div s. This will make the div from right to left.

Demo

 #container div { float: right; width: 100px; background: yellow; margin: 10px; } 

 <div id="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> 

Answer 2

You can use the css direction property to control the display of inline and inline-block elements.

HTML:

 <div class="day day-1">1</div> <div class="day day-2">2</div> <div class="day day-3">3</div> <div class="day day-4">4</div> <div class="day day-5">5</div> <div class="day day-6">6</div> 

CSS

 body { direction: rtl; } .day { display: inline-block; width: 64px; height: 64px; } .day-1 { background: red; } .day-2 { background: green; } .day-3 { background: yellow; } .day-4 { background: blue; } .day-5 { background: lime; } .day-6 { background: lightblue; } 

Demo script

Answer 3

try it

HTML

 <div id="container" dir="RTL">// you can use dir="RTL" global attribute <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> 

CSS

  #container div{ display:inline-block; width:100px; } 

Demo

http://jsfiddle.net/weoej4yn/

Answer 4

with flexbox :

 <div class="container"> <div class="item-a">...</div> <div class="item-b">...</div> <div class="item-c">...</div> </div> .container { display: flex; /* or inline-flex */ flex-wrap: wrap-reverse; } .item-a { order: 3; } .item-b { order: 2; } item-c { order: 1; } 

note that flexbox not supported by older browsers http://caniuse.com/#search=flexbox