सीएसएस: केंद्रित, द्रव बाएं, निश्चित दाएं, मिनट/अधिकतम चौड़ाई के साथ स्रोत आदेशित लेआउट

Question

शीर्षक कहता है। मैं एक 2-स्तंभ सीएसएस लेआउट कि चाहते हैं:

• केंद्रित है - मुख्य सामग्री पेज पर केंद्रित है
• किसी निश्चित (पिक्सेल) सही स्तंभ चौड़ाई
• एक तरल पदार्थ बाएँ स्तंभ है है - का उपयोग करता है सभी उपलब्ध अंतरिक्ष शून्य से सही स्तंभ चौड़ाई
• है स्रोत का आदेश दिया - मेरे उदाहरण में 760px
• एक अधिकतम चौड़ाई के लिए अनुमति देता है - बाएँ स्तंभ सामग्री HTML स्रोत
• एक न्यूनतम चौड़ाई के लिए अनुमति देता में अधिकार स्तम्भ सामग्री से पहले आता है - 10 मेरे उदाहरण में 24px

यदि विंडो अधिकतम चौड़ाई से अधिक है, तो सामग्री अधिकतम मूल्य पर पृष्ठ पर केंद्रित होगी। यदि खिड़की अधिकतम चौड़ाई से छोटी है, तो सामग्री पृष्ठ के 100% को भरती है, जब तक कि यह न्यूनतम चौड़ाई से छोटी न हो जो क्षैतिज स्क्रॉलबार दिखाई दे।

मैं ब्राउज़र के लिए न्यूनतम/अधिकतम चौड़ाई को संभालने के लिए कुछ मामूली जावास्क्रिप्ट का उपयोग करने के लिए तैयार हूं जो उन गुणों का समर्थन नहीं करता है (मैं आपको आईई 6 देख रहा हूं), लेकिन मैं बस उस भाग को देने के इच्छुक हूं लेआउट गिरावट का।

यह टेबल के साथ सरल मृत ड्रॉप है। मैंने सचमुच सैकड़ों उदाहरण लेआउट देखे हैं, और कुछ भी नहीं जो मैं पूछ रहा हूं, कुछ भी नहीं कर सकता है, हालांकि कई ऐसे हैं जो करीब आते हैं। ऐसा लगता है कि समस्या एक तरल बाएं कॉलम और उसी शैली में स्रोत ऑर्डरिंग प्रतीत हो रही है। मुझे उचित स्रोत ऑर्डर के साथ एक निश्चित बाएं/द्रव दाएं (जो मैं चाहता हूं उसके विपरीत) के कई उदाहरण मिल गए हैं, या स्रोत ऑर्डर के बिना द्रव बाएं/निश्चित दाएं, लेकिन दोनों नहीं।

मुझे परवाह नहीं है कि यह फ्लोट या नकारात्मक मार्जिन का उपयोग करता है, लेकिन मैं पूर्ण स्थिति से बचना चाहता हूं।

+---------------------------------------+ 
|          | 
| +---------------------------+-----+ | 
| |fluid      |fixed| | 
| |       |  | | 
| |       |  | | 
| +---------------------------+-----+ | 
|          | 
+---------------------------------------+ 

Answer 1

मैं अत्यधिक बाहर की जाँच CSS templates at Dynamic Drive सलाह देते हैं। 5 वां एक होना चाहिए जो आप खोज रहे हैं (द्रव-फिक्स्ड)। मुख्य कंटेनर तत्व में बस max-width और min-width जोड़ें और आपको पूरा सेट होना चाहिए।

एफवाईआई, ये आपके पृष्ठ लेआउट के आधार के रूप में उपयोग करने के लिए वास्तव में अच्छे टेम्पलेट्स हैं। सीएसएस के साथ खेलना फ्लोट्स और पोजिशनिंग के बारे में बहुत कुछ सीखने का एक शानदार तरीका है, और यह वास्तव में वेब विकास के शुरुआती दिनों में मेरी मदद करता है।

Answer 2

क्या आप इस तरह कुछ ढूंढ रहे हैं? (नकारात्मक हाशिए + तैरता + उचित स्रोत आदेश + सही नियत) सूचकांक पृष्ठ पर

http://blog.html.it/layoutgala/LayoutGala23.html

अधिक लेआउट: http://blog.html.it/layoutgala/

और फिर बस कंटेनर के लिए न्यूनतम/अधिकतम चौड़ाई जोड़ देते हैं।

Answer 3

मेरे प्रयास: http://www.ryankinal.com/fluid/

यह पूरी तरह से काम नहीं करता है, हालांकि यह है कि केवल इसलिए है क्योंकि बहुत छोटी सी खिड़की आकार, मेरी नकारात्मक हाशिए पैदा कर सकता है सामग्री पृष्ठ गिर करने के लिए।यहाँ सिद्धांत है: कुछ प्रतिशत कंटेनर की 100% पर

बाएँ कॉलम में

1. कंटेनर, और
2. अधिकार स्तम्भ 0% चौड़ाई में लिपटे छोड़ दिया मंगाई नाव-सही आवरण
3. निश्चित जैसा स्तंभ चौड़ाई (200px मेरे उदाहरण में)
4. बाएँ स्तंभ और दाएँ स्तंभ की आधी चौड़ाई के अधिकार स्तम्भ छोड़ दिया मार्जिन (100px मेरे उदाहरण में)

तो, सही कॉलम जितना बड़ा होगा, उतना अधिक संभावना है कि सामग्री गिर जाएगी। लेकिन यह उतना करीब है जितना कि मुझे एक अच्छे घंटे में मिल गया है। यह एक बाहरी div में सही कॉलम लपेटने और अतिप्रवाह का लाभ लेने के कारण थोड़ा सा हैकिश भी है: दृश्यमान।

लेकिन वे मेरे dukes (अभी के लिए) हैं।