html - messing up formatting CSS -

  & lt; html & gt; & LT; शैली & gt; .leftColumn {चौड़ाई: 49.2%; बाईंओर तैरना; पैडिंग: 0; फ़ॉन्ट-आकार: 15px; } .right कॉलम {चौड़ाई: 48.9%; सही नाव; पैडिंग: 0; फ़ॉन्ट-आकार: 15px; }। हॉरीएचआर {चौड़ाई: 100%; पृष्ठभूमि: # e1e1e1; पैडिंग: 0; सीमा: ठोस; सीमा चौड़ाई: 2px; सीमा रंग: # ई 1 ई 1 ए 1; सीमा-त्रिज्या: 10px; } .centerHR {मार्जिन-बायां: ऑटो; मार्जिन-दाएं: ऑटो; चौड़ाई: .1%; ऊंचाई: 100%; पृष्ठभूमि: # e1e1e1; पैडिंग: 0; सीमा: ठोस; सीमा चौड़ाई: 2px; सीमा रंग: # ई 1 ई 1 ए 1; सीमा-त्रिज्या: 10px; मार्जिन-टॉप: 0; मार्जिन-नीचे: 0; } .superContainer {ऊंचाई: 330px; मार्जिन टॉप: 200px; मार्जिन-शीर्ष: 0 पिक्सेल; चौड़ाई: 100%; } / * सुपर कॉन्टैनेयर हेडवे ब्लॉक में है, जो एक और कंटेनर है। इसका अर्थ है कि सुपर कॉन्टैनेयर का मार्जिन वास्तव में ब्लॉक लम्बे बनाता है; यह आगे और नीचे ब्लॉक धक्का नहीं है। यह राजमार्ग में किया जाना चाहिए * / .superContainer: मंडराना {पृष्ठभूमि: # 007fff; } .टॉप कॉन्टैनेयर {चौड़ाई: 100%; ऊंचाई: 30%; मार्जिन-शीर्ष: -45 पीएक्स; पाठ संरेखित करें: केंद्र; फ़ॉन्ट-आकार: 24px; फ़ॉन्ट-परिवार: एरियल; रेखा-ऊंचाई: 33px; } .midContainer {width: 100%; ऊंचाई: 55%; मार्जिन-टॉप: 0; मार्जिन-नीचे: 0; पृष्ठभूमि: पारदर्शी; } .bottomContainer {width: 100%; ऊंचाई: 10%; मार्जिन-शीर्ष: 60px; मार्जिन-नीचे: -10 पिक्सेल; }। LeftPar {text-align: center; फ़ॉन्ट-आकार: 22px; रेखा-ऊंचाई: 35 पिक्सेल; पृष्ठभूमि: पारदर्शी; }। LeftBottom {padding-bottom: 10px; मार्जिन-शीर्ष: -15 पीएक्स; चौड़ाई: 20%; बाईंओर तैरना; मार्जिन-बाएं: 18.5%; } .MidBottom {padding-bottom: 10px; मार्जिन-शीर्ष: -15 पीएक्स; चौड़ाई: 20%; मार्जिन-बाएं: 8.75%; बाईंओर तैरना; } .rightBottom {padding-bottom: 10px; मार्जिन-शीर्ष: -15 पीएक्स; मार्जिन-बाएं: 7.25%; चौड़ाई: 20%; बाईंओर तैरना; } & Lt; / style & gt; & Lt; div वर्ग = "सुपर कॉन्टैनेयर" & gt; & Lt; div class = "topContainer" & gt; हम इसे आसान & lt; / div & gt; & Lt; div वर्ग = "मिड कॉन्टैनेयर" & gt; & Lt; घंटा वर्ग = "हॉरीएचआर" & gt; & lt; / hr & gt; & Lt; div class = "leftColumn" & gt; & Lt; p class = "leftPar" & gt; हमारे पास विस्तृत पाठ, त्वरित समीक्षा मार्गदर्शिका, और 15 से अधिक पाठ्यक्रमों के लिए क्विज़ है & lt; / p & gt; & Lt; / div & gt; & Lt; div वर्ग = "सही कॉलम" & gt; चित्र & lt; / div & gt; & Lt; एचआर वर्ग = "केंद्र एचआर" & gt; & lt; / एचआर & gt; & Lt;! - मुझे पता नहीं क्यों है, लेकिन आपको फ्लोट को पहले छोड़ दिया जाना है, फिर फ्लोट सही है, और फिर केंद्र वस्तु - & gt; & Lt; एचआर वर्ग = "हॉरीएचआर" & gt; & lt; / hr & gt; & Lt; / div & gt; & Lt; div class = "bottomContainer" & gt; & Lt; div class = "leftBottom1" & gt; & Lt; / div & gt; & Lt; div वर्ग = "मिडबॉटम" & gt; बी & lt; / div & gt; & Lt; div वर्ग = "दाएंबोटम" & gt; सी & lt; / div & gt; & Lt; / div & gt; & Lt; / div & gt; & Lt; / html & gt;   
 ऊपर मेरा कोड है, लेकिन किसी कारण से, मैं इसे ठीक से स्वरूपित नहीं कर सकता। निचले अक्षरों ए, बी, और सी नीचे कंटेनर विभाजित नहीं है, और शीर्ष कंटेनर में सामग्री भी नहीं दिखाती है। किसी को भी पता है कि मेरे कोड में क्या गलत है?   
 
 
 आपके कोड में छोटी गलतियाँ हैं:  
  1 -   .topcontainer  एक नकारात्मक मार्जिन के रूप में है, इसलिए पाठ स्क्रीन के बाहर है  मार्जिन शीर्ष: -45px;    2 -   & lt; div class = "leftBottom1" & gt;  "1" के बिना होनी चाहिए, बस "leftBottom"  
 यह उन छोटे सुधारों के बाद यहां अच्छा काम करता है: