フローティングされている要素にCSSの最小幅を設定する方法はありますか？

Question

私はこのHTMLを持っている：

<div id="subNav"></div> 
<div id="feed"></div> 
<div id="feedBar"></div> 

私は左これらのdiv要素のすべてを浮かべています。私は#subNavと#feedBarの幅を設定しましたが、#feedにはその最小幅を設定しました。ウィンドウが大きくても最小幅が必要です。フローティングで最小幅の作業を行うことができる方法はありますか？私はページ上で柔軟なレイアウトを作ろうとしています。

Answer 1

次の答えは、（元の質問に）@ Chromedudeさんのコメントに反応して、のJavaScriptソリューションを使用しています：

@デビッドこの動作をオーバーライドする方法はありますか？ JavaScriptと？

私は（確かにJavaScriptライブラリで）これを行うはるかに簡単な方法があります確信しているが、これは私が（英国の）朝のこの時を考え出すことができる最高だった：

var feed = document.getElementById('feed'); 
var width = document.width; 
var feedBarWidth = document.getElementById('feedBar').clientWidth; 
var subNavWidth = document.getElementById('subNav').clientWidth; 
feed.setAttribute('style', 'width: ' + (width - (subNavWidth + feedBarWidth)) + 'px'); 

JS Fiddle demo。そのようなFoundation 3内の1つとして

var bodyWidth = $(document).width(); 
var subNavWidth = $('#subNav').width(); 
var feedBarWidth = $('#feedBar').width(); 
$('#feed').css('width', bodyWidth - (subNavWidth + feedBarWidth)); 

Answer 2

使用グリッドシステム（単に提案としてライブラリによって提供される容易さなど）のjQueryを使用

。グリッドの要素を表すdivに配置すると、min-widthは正常に動作します。

グリッドなしでmin-widthを動作させるには、不可視擬似要素を必要最小限の段落幅で挿入するCSSルールを使用します。

p:before { 
    content: ""; 
    width: 10em; 
    display: block; 
    overflow: hidden; 
} 

さらに詳しい情報はsourceにあります。