मैं तालिका का उपयोग किये बिना इस 3 कॉलम लेआउट को दोहराना कैसे करूं?

Question

इसे ठीक से समझने में सक्षम नहीं होने पर थोड़ा निराश महसूस करना। मैं एक पुरानी साइट अपडेट कर रहा हूं और टेबल के बिना यह काम करने की कोशिश कर रहा हूं। मैं इसे बॉक्स फ्लेक्स के साथ कर सकता हूं लेकिन इसके कई ब्राउज़रों द्वारा असमर्थित है। लेआउट इस

[col-1 के रूप में छोटे के रूप में संभव] [col-2-चाहिए उपयोग सभी-अंतरिक्ष ] [col-3 के रूप में छोटे जैसे- जैसे कुछ है संभव]

कॉलम को समान ऊंचाई होने की आवश्यकता नहीं है, और सभी 3 कॉलम की समग्र चौड़ाई संयुक्त माता-पिता द्वारा बाधित होती है।

यदि मैं फ्लोट्स का उपयोग करता हूं तो मुझे विस्तार करने के लिए मध्य कॉलम नहीं मिल सकता है। कॉल -1 और कॉल -2 की चौड़ाई निश्चित चौड़ाई नहीं है।

कोई भी समाधान जो समस्या (तालिकाओं) को और भी खराब नहीं लगता है?

यहाँ टेबल आधारित समाधान का एक उदाहरण है: http://jsfiddle.net/7dsCV/1/

Answer 1

यह एक अजीब समाधान है, लेकिन बीच div पर overflow: hidden सेटिंग आप दे देंगे मैं तुम्हें विश्वास हैं:

http://jsfiddle.net/qrBXL/

मैं यह पता लगाने की कि ऐसा क्यों होता है, लेकिन नहीं मिला है, जिसका अर्थ है किया गया है अभी तक इसके आसपास। मेरा सबसे अच्छा अनुमान यह है कि overflow केवल आयताकार कंटेनरों पर काम करता है और div के भीतर लपेटने वाली तैरता इसे अनिवार्य रूप से गैर-आयताकार बनाता है।

Answer 2

जब आप कहते हैं कि "संभव के रूप में छोटे" मैं अभी भी मानते हैं कि वे एक निश्चित चौड़ाई है। पृष्ठों के बीच अलग-अलग चौड़ाई रखना बुरा होगा। कहा जा रहा है कि, आप इस आलेख को ऐसे लेआउट के बहुत अच्छे उदाहरण के लिए देख सकते हैं जो कई मुद्दों का ख्याल रखता है: http://www.alistapart.com/articles/holygrail/ यदि आप इसे सभी के माध्यम से नहीं जाना चाहते हैं, तो अंत में आपके पास सभी कोड, कॉपी करने के लिए तैयार & चिपकाया।