title: How to change float opposite value using jQuery
body: <p>I am having following HTML/CSS structure.</p>
  
  <p><strong>CSS:</strong> </p>
  
  <pre><code>&lt;style&gt;
      #main {
          width: 100%;
      }
  
      #main-title {
          background-color: #b5dcb3;
          width: 100%
      }
  
      #menu {
          background-color: #aaa;
          height: 200px;
          width: 100px;
          float: left;
      }
  
      #right-menu {
          background-color: #aaa;
          height: 200px;
          width: 100px;
          float: right;
      }
  
      #content {
          background-color: #eee;
          height: 200px;
          width: 350px;
          float: left;
      }
  
      #footer {
          background-color: #b5dcb3;
          clear: both
      }
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;div id="main-title"&gt;
          &lt;h1&gt;This is Web Page Main title&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div id="menu"&gt;
          &lt;div&gt;&lt;b&gt;Main Menu&lt;/b&gt;&lt;/div&gt;
          HTML
          &lt;br /&gt; PHP
          &lt;br /&gt; PERL...
      &lt;/div&gt;
      &lt;div id="content"&gt;
          &lt;p&gt;Technical and Managerial Tutorials&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="right-menu"&gt;
          &lt;div&gt;&lt;b&gt;Right Menu&lt;/b&gt;&lt;/div&gt;
          HTML
          &lt;br /&gt; PHP
          &lt;br /&gt; PERL...
      &lt;/div&gt;
      &lt;div id="footer"&gt;
          &lt;center&gt;
              Copyright Area
          &lt;/center&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now I want to apply mirror effect like WHERE <code>float:left</code> is changed to <code>float:right</code> and same reverse WHERE <code>float:right</code> is changed to <code>float:left</code>.</p>
  
  <p>Code sample: <a href="http://jsfiddle.net/mananpatel/mw1sxpx0/">http://jsfiddle.net/mananpatel/mw1sxpx0/</a></p>
  
  <p><strong>Note: I am keeping on different file for float:left class and float:right class.</strong></p>
  
  <p>Any idea how to do this with jQuery code on <code>page load</code>.</p>