html - 右フロートdivとmin-width、divはブラウザのサイズ変更時に新しい行に移動します

Question

タイトルがよく説明されていないので申し訳ありませんが、ここで問題を説明するために最善を尽くします。この特定の問題をそのように呼び出すことができれば、おそらく非常に簡単な解決策がありますが、cssだけを使用してそれを理解することはできません。

基本的に、最小幅が設定された親（'wrapper'）divと2つのfloat子があります。動的ページを作成しているときに、ユーザーは「右」のフロートdivをクリックできるようになり、クリックすると、そのdiv内に新しいコンテンツが追加されます。

ユーザーがコンテンツをdivに追加した後、ブラウザーのサイズを変更したい場合に問題が発生します。ユーザーがブラウザの幅を縮小しようとすると（ユーザーがコンテンツを追加すると）メインラッパーの幅が拡大するため（ブラウザのサイズを変更）、「右」のfloatdivは新しい行に移動します。だから私の質問は：divが新しい行に移動するのを無効にする方法（css）はありますか？

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

float:right;#rightから削除してみてください

#right{
    background-color:blue;
}