प्राथमिकता दें उप div अंदर लपेट पूरे div

Question

लपेटकर इससे पहले कि मैं दो div के है कि इस तरह एक आवरण-div के अंदर छोड़ दिया करने के लिए जारी कर रहे हैं:

HTML:

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

सीएसएस:

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

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

जब खिड़की की चौड़ाई को कम करने पर क्या होता है वें है पहले #nav #logo से नीचे कूदता है और फिर यह अंदर लपेटना शुरू करता है। क्या कोई तरीका है (जावास्क्रिप्ट के बजाए लेआउट का उपयोग करके) इसे पहले #nav के नीचे एक थ्रेसहोल्ड (150px चौड़ाई कहें) में लपेटें और फिर जब उस सीमा तक पहुंच जाए तो इसे #logo से नीचे कूदने दें?

Answer 1

एकमात्र समाधान जिसके साथ मैं आया हूं, एक निश्चित आकार बायां बार (बाएं लोगो div है) है। यदि यह तय हो गया है, तो दाएं फलक में इसके लिए जगह बनाने के लिए बाएं हाशिए हो सकते हैं और शेष जगह ले जा सकते हैं, और यदि आवश्यक हो तो पाठ को लपेटें। इसकी कमी यह है कि अगर यह नौसेना या नौसेना के सीएसएस फ्लोट नहीं हो रहा है, तो खिड़की बहुत ज्यादा घूमती है तो यह बाएं फ्लोटिंग डिव के नीचे कूद नहीं जाएगी।

उदाहरण शो के लिए कुछ अतिरिक्त पाठ के साथ http://jsfiddle.net/vZWTc/278/ पर उपलब्ध है लेकिन यह यहां संक्षेप में उपलब्ध है।

<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; 
}