Is there a way to make div render from right to left HTML

Question

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. :)

Answer 1

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>

Answer 2

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