右浮动div和min-width，div移动到浏览器调整大小的新行

Question

Sorry for not well-explained title, but I will try my best to explain the problem here. There is probably a very easy solution to this particular problem, if i can call it that way, but I just can't figure it out with using only css.

Basically I have a parent ('wrapper') div which has min-width set and 2 floated children. As I am creating a dynamic page, user will be able to click on the 'right' floated div, and when he clicks on it new content will be added inside that div.

Problem occurs if the user wants to resize the browser after adding content to the div. Because the width of the main wrapper will be increased (when user adds content) when user tries to reduce the browser width (resize the browser) the 'right' floated div will go to the new line. So my question is: Is there any way (css) to disable div from moving to the new line?

Here is the link to the jsfiddle: http://jsfiddle.net/LKgbx/30/

HTML:

<div id="wrapper">
     <div id="left">I'm left</div>
     <div onclick="changeText()" id="right">I'm right</div>
 </div>

CSS:

#wrapper{
    min-width:400px;
    background-color:#A3F8A9;
    display:inline-block;
}
#left{
    float:left;
    width:300px;
    background-color:red;
}
#right{
    float:right;
    background-color:blue;
}

JS:

function changeText(){
    document.getElementById('right').innerHTML="Just adding some text to make div longer";
}

Answer 1

<script type="text/javascript">
function changeText(){
    document.getElementById('right').innerHTML="Just adding some text to make div longer";
}
</script>
<style type="text/css">
#wrapper{
    background-color:#A3F8A9;
    position:relative;
}
#left{
    position:absolute;
    left:0px;
    width:300px;
    background-color:red;
}
#right{
    position:absolute;
    left:300px;
    width:100%;
    background-color:green;
}
</style>


<div id="wrapper">
     <div id="left">I'm left</div>
     <div onclick="changeText()" id="right">I'm right</div>
 </div>

Answer 2

Try removing float:right; from #right

#right{
    background-color:blue;
}