three div in a single row
===

I want to align the three div in a single row for that i have given the left and center div to float:left property and right div to float right property

but my right div is displayed on the left side of the screen

my code is as follows

    <div style="width:100%; height:100%;">
	<div align="center" id="left_portion" style="display:none; position:absolute; float:left; width:10%; height:10%;"></div>
	<div id="scroller" align="center" style="width:100%; height:100%; overflow:hidden; position:absolute; float:left;">
    	<img src="" id="img_main" style="width:100%; height:100%; overflow:hidden;" onClick="scaleImage(event)">
	</div>
    <div id="right_portion" align="center" style="display:none; float:right; position:absolute;  width:10%; height:10%;"></div>
    </div>   

i want to use the left and right div as a masking div i.e. when i click on center div second div is going to scale and i want to show the particular portion of the div and rest portion is going to mask from left and right div
 