右浮动 div 和最小宽度，div 在浏览器调整大小时移动到新行

抱歉，标题没有很好地解释，但我会尽力在这里解释问题。 如果我可以这样称呼它，那么这个特定问题可能有一个非常简单的解决方案，但我只是无法仅使用 css 来解决它。

基本上我有一个父级（“包装器”）div，它设置了最小宽度和2个浮动子级。当我创建动态页面时，用户将能够单击“右侧”浮动 div，当他单击它时，新内容将添加到该 div 内。

如果用户在向 div 添加内容后想要调整浏览器的大小，则会出现问题。因为当用户尝试减小浏览器宽度（调整浏览器大小）时，主包装器的宽度将增加（当用户添加内容时），“右”浮动 div 将转到新行。 所以我的问题是：有什么方法（css）可以禁止 div 移动到新行吗？

这是 jsfiddle 的链接：http://jsfiddle.net/LKgbx/30/ 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:

<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>