`float:left` and a rtl direction in a css stylesheet

how do I turn the float:left into a float:right when the page is viewed in right to left开发者_JS百科 languages? (Same JSP file is used)

---

You can't just "turn" it, especially not with pure CSS.

Some of your options are:

1. Create two separate CSS style sheets (e.g. ltr.css and rtl.css) each with its own rules then load the proper file using server side code.
2. When switching to rtl view, have JavaScript code that iterates over all relevant elements and changing their style - with jQuery it's going to be pretty simple to implement but also possible with plain JavaScript.

---

.FLeft {
  float: left !important;
}

.FRight {
  float: right !important;
}

div.main-div[dir='rtl']>.FLeft {
  float: right !important;
}

div.main-div[dir='rtl']>.FRight {
  float: left !important;
}

div.child-div {
  width: 50%;
  background-color: #e6ffe6;
}

<div class="main-div">
  <div>
    <div class="FLeft child-div">1. Float left (default)</div>
    <!-- For style= "float: left;" -->
  </div>
  <div style="clear:both"></div>
  <div class="FLeft  child-div" dir="rtl">2. Float left (rtl)</div>
  <!-- For style="float: right"; ltr  -->
  <div style="clear:both"></div>

  <div class="FRight child-div">3. Float right (default)</div>
  <!-- For style= "float: right;" -->
  <div style="clear:both"></div>
  <div class="FRight  child-div" dir="rtl">4. Float right (rtl)</div>
  <!-- For style="float: right";  ltr-->
  <div style="clear:both"></div>
</div>
<hr/>
<!-- Now for rtl text in div-main -->

<div class="main-div" dir="rtl">
<p>For dir rtl</p>

    <div class="FLeft child-div">1. Float left</div>
    <!-- For style= "float: left;" -->

  <div style="clear:both"></div>
  <div class="FLeft child-div " dir="ltr">2. Float left (ltr)</div>
  <!-- For style="float: right"; rtl  -->
  <div style="clear:both"></div>

  <div class="FRight child-div">3. Float right (default)</div>
  <!-- For style= "float: right;" -->
  <div style="clear:both"></div>
  <div class="FRight child-div" dir="ltr">4. Float right (ltr)</div>
  <!-- For style="float: right";  rtl-->
  <div style="clear:both"></div>
</div>

Replace div.main-div with body or tag that you are using dir="rtl" and use FLeft and FRight classes insted of inline float styling. Please consider CSS as solution as my html Demo is bad. For rtl div., float left elements are floated to the right.