2011-06-20 8 views
6

親divの残りのスペースを埋める要素が必要です。私はこれを行うことができました、あなたはここでそれを見ることができます "リンクを削除"しかし、左のdivの下に(右)充填div。私は基本的に、右のdivが左のdivが終了するところから開始したい。divのスペースを埋める

これは意味があると思います。

<html> 
    <head> 
    <title></title> 
    <style type="text/css"> 
    #left { 
     float:left; 
     width:180px; 
     background-color:#ff0000; 
     height:20px; 
    } 
    #right { 
     width: 100%; 
     background-color:#00FF00; 
     height:30px; 
    } 
    </style> 
    </head> 

    <body> 
    <div> 
    <div id="left">Nav</div> 
    <div id="right">This is the space I need to fill but not go underneath the nav div</div> 
    </div> 
    </body> 
    </html> 
+0

はfloatを追加: –

+0

を#rightする権利を、私は幅100%で、そのスペースを埋めることが可能であるとは思いません。右のdivを左のdivの下に置かないようにする唯一の方法は、右のdivをフロートさせることですが、それを行うと幅100%で次の行に移動します。幅100%を削除すると、左のdivの横にうまく積み重ねられますが、完全には埋められません。あなたのアプローチを再評価しなければならないかもしれませんが、達成しようとしていることが分かっていれば簡単になり、代替ソリューションを提供することができます。 – Zoidberg

答えて

12

、単にwidth: 100%を削除し、overflow: hiddenを追加します。

を参照してください:http://jsfiddle.net/hJzJf/から

なぜこの仕事がありません(私はあなたのheight Sはテスト目的のためだけにあると仮定していますか)?

参照:http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats

+0

私はそのトリック、素晴らしいリンクについては全く知らなかった! – Kyle

+0

私はこれについて知りませんでした。毎日何か新しいことを学ぶ。 +1 – Till

+0

+1素晴らしいトリック:) – sandeep

3

#right要素にmargin-left: 180px;を設定します。これにより、最初の要素の幅だけオフセットされます。 #right

http://jsfiddle.net/DHSej/

+0

これは、Mitchさんの関心があるかもしれないし、そうでないかもしれない目に見える領域から180pxの#rightをシフトさせるでしょう – Till

+0

Leg-End!私はこれを見落としたとは思わない。良いですね。 – Mitch

関連する問題