float element go to bottom when scroll bar exist

[slikz]

\[code\]<div class="con"> <div class="left" id="left"> <input type="button" value="http://stackoverflow.com/questions/14039266/set the height of the left panel" id="open" /> </div> <div class="right" id="right"></div></div>\[/code\]The \[code\]left\[/code\] and \[code\]right\[/code\] panel are both floated left,they work well when no scroll bar exist,however if the height of the \[code\]left\[/code\] panel changed,and the scroll bar will display,then the \[code\]right\[/code\] panel will go to bottom.See exmaple here:At first,the \[code\]right\[/code\] div will display beside the \[code\]left\[/code\],when you click the button,the \[code\]right\[/code\] will go to bottom.How to fix it?updateIn fact I can not set the absolute size of the left and right div,since I want them resize according the content autoly.