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

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

Something like this

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 putting it backwards won't work.

This is what I mean with smaller resolution.

div2 div1
div4 div3
div6 div5
div8 div7
div9

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

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

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

Something like this

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 putting it backwards won't work.

This is what I mean with smaller resolution.

div2 div1
div4 div3
div6 div5
div8 div7
div9

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

• javascript
• jquery
• css
• html

• 1 what is wrong with using body { direction:rtl; ]}? – AmmarCSE Commented Jun 17, 2015 at 11:52

4 Answers 4

Use float: right on divs. This will render divs 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>

You can use css direction property to control how inline and inline-block elements are rendered.

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 fiddle

Try this

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/

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 is not supported by older browsers http://caniuse.com/#search=flexbox