Is there any way to set a CSS min-width on an element that is floated?

I have this html:

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

I have floated all of these divs left. I set the width of #subNav a开发者_StackOverflow中文版nd #feedBar, but on #feed I set its min-width . It takes the min-width even though the window is larger. Is there any way that with floating you can make the min-width work? I am trying to make a flexible layout on the page.

The following answer uses a JavaScript solution, in response to @Chromedude's comment (to the original question):

@David Is there any way to override this behavior? with javascript?

I'm sure there's a far more simple way of doing this (certainly with a JavaScript library), but this was the best I could come up with at this time of morning (in the UK):

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.

Using jQuery (just as a suggestion as to the ease offered by a library):

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

Use a grid system such as the one in Foundation 3. When placed on a div representing an element of the grid, min-width behaves just fine.

To get min-width to work without a grid, use a CSS rule that inserts an invisible pseudo-element with the desired minimum paragraph width.

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

Further details are at the source where I learned this.