मैं पूरी तरह से HTML और CSS- आधारित लेआउट बनाने की कोशिश कर रहा हूं जो बाईं ओर एक पृष्ठ की मुख्य सामग्री प्रस्तुत करता है (जो पूरे चौड़ाई पृष्ठ के नीचे, बॉक्स को घटाता है) और दाईं ओर एक छोटा सा बॉक्स, नेविगेशन या किसी प्रकार की जानकारी के लिए कहें। यहाँ के साथ समस्याओं उसमें वर्णित है कि, समस्या का कारण है कोड का एक उदाहरण है:विंडो पर फ्लोटिंग डिव पागलपन का आकार बदलें
<!DOCTYPE HTML>
<html lang="en" dir="ltr">
<head>
<title>Floating Div Madness upon Window Resize</title>
<style>
* {margin:0; padding:0}
body {margin:20px; font-size:0px; color:#000000}
div.page {margin-right:120px; background-color:#AAAAFF; float:left}
div.wide {width:300px; background-color:#AAFFAA}
div.box {width:100px; margin-left:-100px; background-color:#FFAAAA; float:left}
h1 {font-size:x-large}
p {padding-bottom:5px; font-size:small}
</style>
</head>
<body>
<div class="page">
<h1>MAIN PAGE</h1>
<p>This is the main portion of the page (light blue). It is currently floated left with a right margin of 120px, to account for the box (light red) as well as the white space between it and the box (light red). All may look well on the surface, but...</p>
<p>Resize the window in Firefox (I tested both 3.5 and 4) and the white margin of the body can be cut off, not only on the right side, but on the bottom of the page, too.</p>
<p>Remove enough text and this div will shrink to fit it, no longer taking up the entire width of the page (minus the box).</p>
<div class="wide">
<p>If I nest another, non-floating div with a fixed width (light green), something even stranger happens when I resize the window, this time in Internet Explorer 6 (maybe in other versions, too): The text in the page div (light blue) is squished, I think by the margin of the box (light red). The fixed width div (light green) is unaffected by this.</p>
</div>
</div>
<div class="box">
<h1>BOX</h1>
<p>(this could be navigation, or anything else)</p>
</div>
</body>
</html>
मैं बॉक्स (प्रकाश लाल) रखने के लिए बाद में अर्थ कारणों के लिए कोड में चाहते हैं, लेकिन यह वैकल्पिक है। यहाँ और अधिक सफल बातें मैं पहले से ही की कोशिश की है में से कुछ हैं, और क्यों वे काम करने के लिए नहीं है:
पूर्ण स्थिति निर्धारण: यह बस के रूप में अच्छी तरह से प्रकट होता है अपने ही कोड के रूप में जब ब्राउज़र का आकार नहीं बदला गया है। यह कुछ डिग्री तक फ़ायरफ़ॉक्स में गायब होने वाले बॉडी मार्जिन को संबोधित करता है। हालांकि, जब खिड़की का आकार काफी छोटा हो जाता है, तो बॉक्स (हल्का लाल) मुख्य पृष्ठ div (हल्का नीला) के नीचे या नीचे जाएगा, जो कि जेड-इंडेक्स के उच्च या निम्न के आधार पर होता है।
केवल बॉक्स को फ़्लोट करना: इसमें HTML को बदलना और कोड में शेष सामग्री से पहले बॉक्स (हल्का लाल) रखना शामिल है। यह स्वचालित रूप से मुख्य पृष्ठ div (हल्का नीला) फैलाता है, कुछ ऐसा जो मुझे फ़्लोट विधि का उपयोग करके करने के लिए कोई तरीका नहीं है (बिना किसी मात्रा के सामग्री के)। हालांकि, शरीर के मार्जिन अभी भी फ़ायरफ़ॉक्स में हटा दिए गए हैं, पाठ अभी भी आईई में squishes है, और बॉक्स (हल्का लाल) अभी भी मुख्य पृष्ठ div (हल्का नीला) के ऊपर या नीचे (फिर से जेड-इंडेक्स के आधार पर) जाएगा खिड़की काफी छोटा हो जाता है।
सब कुछ के लिए न्यूनतम चौड़ाई असाइन करना: यह आईई समस्या को रोकने में बहुत सफल था, लेकिन किसी पृष्ठ पर कुछ सीएसएस काम की आवश्यकता है जो इससे कहीं अधिक जटिल है और जो विभिन्न मीडिया प्रकारों का समर्थन करेगा। और, यह अभी भी फ़ायरफ़ॉक्स में बॉडी मार्जिन को संबोधित नहीं करता है या मुझे सामग्री के बिना मुख्य पृष्ठ div (हल्का नीला) का विस्तार करने का एक तरीका देता है, क्योंकि यह अभी भी तैर रहा है।
शरीर मार्जिन को सीमा में बदलना: यह फ़ायरफ़ॉक्स समस्या को हल नहीं करता है; चाहे वह सीमा या मार्जिन हो, फिर भी जब मैं फ्लोट का उपयोग करता हूं तो पृष्ठ के दाएं और निचले हिस्से में इसे काट दिया जाता है।
बॉक्स में मार्जिन जोड़ें: यह फ़ायरफ़ॉक्स के लिए भी काम नहीं करता है। मैं जगह पर रहने के लिए मुख्य पृष्ठ सामग्री (हल्का नीला) पर एक निचला मार्जिन प्राप्त कर सकता हूं (यह ऐसा कुछ है जो विशेष रूप से मेरे लिए उत्सुक लगता है), लेकिन बॉक्स (हल्का लाल) पर एक सही मार्जिन अभी भी कट जाता है।
किसी भी मदद की बहुत सराहना की जाएगी, क्योंकि मुझे इन समस्याओं का उत्तर देने वाली कोई साइट या पोस्ट नहीं मिल पाती है, यह बताती है कि ये समस्याएं मौजूद हैं; मैंने निश्चित रूप से समाधानों की तलाश और परीक्षण के लिए बड़ी संख्या में घंटे लगाए हैं!
आप किस ब्राउज़र और संस्करण की परवाह करते हैं? मैंने इसे आपके टेक्स्ट में देखा: "इस बार इंटरनेट एक्सप्लोरर 6 में" '- आपको * इंटरनेट एक्सप्लोरर 6 का समर्थन नहीं करना चाहिए जब तक कि आपके पास ऐसा करने का ठोस कारण न हो। http://ie6countdown.com/ + http://gs.statcounter.com/#browser_version-ww-monthly-201005-201105 – thirtydot
@ थर्डॉट हां, कुछ अच्छे कारण हैं जो मैं इसे काम करने के लिए भी कोशिश कर रहा हूं इंटरनेट एक्सप्लोरर 6 पर संभव है। मैं जिस प्राथमिक इंट्रानेट के लिए डिजाइन कर रहा हूं, वह अच्छा, बुरा और बदसूरत दोनों बहाने के लिए है, अभी भी आईई 6 का उपयोग कर रहा है; व्यवस्थापक इसके बारे में काफी अशिष्ट है और अपग्रेड नहीं करेगा। आईई 6 के अलावा, मुझे उन उपयोगकर्ताओं में दिलचस्पी है जो इंट्रानेट के बाहर से पृष्ठों पर भी जाएंगे; संभावना से अधिक, उनके पास अधिक आधुनिक ब्राउज़र होंगे। यही कारण है कि मैं फ़ायरफ़ॉक्स 3.5 और 4 में समस्या के बारे में भी चिंतित हूं, जो आईई 6 अंक की तरह है, मुझे किसी भी दस्तावेज के लिए कोई दस्तावेज नहीं मिल रहा है। – JBT
एक नियम के रूप में आपको अपनी चौड़ाई को स्पष्ट रूप से निर्दिष्ट किए बिना तत्व को फ़्लोट नहीं करना चाहिए। आपका div.page यह करता है। यदि आप किसी भी तरह से चौड़ाई का स्पष्ट रूप से उपयोग नहीं कर सकते हैं, तो आपको एक और लेआउट मिलना चाहिए जो आप चीजों को करने की कोशिश कर रहे तरीके से फ़्लोट नहीं करता है (उदाहरण के लिए तत्व के अंदर फ़्लोट किए गए तत्व को बिना चौड़ाई वाले तत्वों को घोंसला)। – Frug