तीन-स्तंभ सीएसएस लेआउट - निर्धारित/अधिकतम/परिवर्तनीय चौड़ाई

Question

मैं मुसीबत काम करने के लिए निम्नलिखित तीन कॉलम लेआउट हो रही हूँ:

A    B    C 
+-------+-------------------+------------+ 
|  |     |   | 
| Fixed | Use unused space | Resizable | 
|  |     |   | 
+-------+-------------------+------------+ 

कहाँ:

• एक है। निश्चित चौड़ाई।
• बी कंटेनर में किसी भी उपलब्ध स्थान नहीं कॉलम ए और सी
• सी सामग्री है जो चौड़ाई बदल सकते हैं और एक अलग चौड़ाई के लिए "धक्का" बी की जरूरत हो सकती है के द्वारा प्रयोग किया उपयोग करता है।

यहाँ इस बनाने में अपना सर्वश्रेष्ठ प्रयास किया जाता है: http://jsfiddle.net/x3ESz/

सभी अन्य विषयों मैं सभी तीन मार्जिन का उपयोग कर रैपिंग को रोकने के लिए बी के साथ चल के रूप में होने की सलाह देते हैं पर ध्यान दिया है, लेकिन इस के लिए अनुमति नहीं है सी को बी की सामग्री के आधार पर आकार बदलने के लिए (जैसा कि बी के दाएं मार्जिन के लिए एक मान दिया जाना चाहिए)।

मैं भी यह प्राप्त करने के लिए जेएस का सहारा लेना चाहता हूं।

Answer 1

यह आसानी से #div_middle को adding overflow: hidden द्वारा हल किया जा सकता है और मार्जिन को हटाने:

#div_middle { 
    overflow: hidden; 
    border:1px solid #0F0; 
} 

देखें:http://jsfiddle.net/thirtydot/x3ESz/1/

यह सभी आधुनिक ब्राउज़रों और IE7 + में काम करता है।

Answer 2

आप अपने लेआउट बदलने के बिना इसे ठीक कर सकते हैं यदि आप इस स्क्रिप्ट का उपयोग:

$(document).ready(function() { 
    $('#div_right').click(function() { 
     $(this).append('--'); 
     $('#div_middle').css("margin-right", $('#div_right').width() + 2 +"px"); 
    }); 
}); 

Answer 3

भी दोनों परिवर्तनीय चौड़ाई साइडबार के साथ काम करता:

http://jsfiddle.net/QG2EU/

#div_left{ 
    float:left; 
    border:1px solid #F00; 
} 
#div_middle { 
    overflow: hidden; 
    border:1px solid #0F0; 
} 
#div_right { 
    float:right; 
    border:1px solid #00F; 
}