Prefer wrap inside sub-div before wrapping whole div

Question

I have two div's that are floated to the left inside a wrapper-div like this:

HTML:

<div id="container">
    <div id="logo">LOGO</div>
    <div id="nav">Link1 Link2 Link3 Link4</div>
</div>​

CSS:

#container {  }
#logo { float: left; margin-right: 10px; }
#nav { float: left; }

JSFiddle: http://jsfiddle.net/vZWTc/277/

What happens when reducing the width of the window is that first #nav jumps down below #logo and then it starts wrapping inside. Is there a way (using layout rather than javascript) to first make it wrap inside #nav down to a threshold (say 150px width) and then when that limit is reached allow it to jump below #logo?

Answer 1

The only solution I've come up with is to have a fixed size left bar (the left logo div that is). If it's fixed, the right pane can have a left margin to make room for it and take up the rest of the space, and with it wrap the text if that's necessary. The shortcoming of this is that it won't jump below the left floating div if the window shrinks too much since the nav or the navcontent css is not floating.

Example is available at http://jsfiddle.net/vZWTc/278/ with some additional text for show but it is available in short here.

<div id="container">
    <div id="logo">LOGO</div>
    <div id="nav">
        <div id="navcontent">
            <p>Link1 Link2 Link3 Link4</p>
        </div>
    </div>
</div>​

#logo {
    float: left;
    margin-right: 10px;
}
#nav {
    display: block;
}
#navcontent {
    margin-left: 100px;
}