html - How to change float opposite value using jQuery -

i having following html/css structure.

css:

<style>     #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     } </style> 

html:

<div id="main">     <div id="main-title">         <h1>this web page main title</h1>     </div>     <div id="menu">         <div><b>main menu</b></div>         html         <br /> php         <br /> perl...     </div>     <div id="content">         <p>technical , managerial tutorials</p>     </div>     <div id="right-menu">         <div><b>right menu</b></div>         html         <br /> php         <br /> perl...     </div>     <div id="footer">         <center>             copyright area         </center>     </div> </div> 

now want apply mirror effect float:left changed float:right , same reverse float:right changed float:left.

code sample: http://jsfiddle.net/mananpatel/mw1sxpx0/

note: keeping on different file float:left class , float:right class.

any idea how jquery code on page load.

try : can change css style properties of menu below

$(function(){    $('#menu').css('float','right');     $('#right-menu').css('float','left'); }); 

jsfiddle demo