html - How to make the two div at the same line with the same height by browser -

उदाहरण के लिए, यह मेरा पृष्ठ लेआउट है,

  +++++++ +++++++++++++++++++ + + div2 + + + div1 + + + + + + + + + + + ++ ++++++++ + + + + + + + +++++++++ + +++++++++++++++++++++++++   
 जैसा कि दिखाया गया है, div1 और div2 और div3 समान पंक्ति पर हैं,  
  & lt; div id = "कंटेनर" शैली = "चौड़ाई: 100%; न्यूनतम-ऊंचाई: 500px;" & gt; & Lt; div id = "div1" शैली = "फ्लोट: बाएं; चौड़ाई: 1 9%; ऊंचाई: 100%" & gt; & lt; / div & gt; & Lt; div id = "div2" शैली = "फ्लोट: बाएं; चौड़ाई: 1%; ऊंचाई: 100%" & gt; & Lt; img src = "toggle.gif" / & gt; & lt; / div & gt; & Lt; div id = "div3" शैली = "फ्लोट: बाएं; चौड़ाई: 80%; ऊंचाई: 100%" & gt; & lt; / div & gt; & Lt; / div & gt;   
 लेकिन उनमें से सामग्री एक समान नहीं है क्योंकि उनकी समान ऊंचाई नहीं है।  
 यहां तक ​​कि मैंने उनके मूल तत्व की न्यूनतम ऊंचाई तय की और 100% की ऊंचाई निर्धारित की।  
 मैंने सोचा कि div # कंटेनर की ऊंचाई चाहिए & gt; 500px।  
 और तीनों divs'height सभी 100% हैं, इसलिए उन्हें कम से कम 500px लेना चाहिए।  
 लेकिन ऐसा लगता है कि मैं गलत हूं। मुझे आश्चर्य है कि क्या हो रहा है?  
 बीडब्ल्यूटी, डिव 2 के अंदर केवल एक आइकन है जो कि div1 (jquery का उपयोग) टॉगल करता था, हालांकि जब div1 छिपा हुआ है, तो div3 भी केवल 80% ब्राउज़र विंडो, कैसे डिव 2 और डिविए 3 को पूरी विंडो लेना है?  
 मुझे पता है कि मैं उनके आकार को सेट करने के लिए jquery का उपयोग कर सकता हूं, लेकिन मुझे आश्चर्य है कि यह ब्राउज़र द्वारा कार्यान्वित किया जा सकता है?   
 
 
 जब आप इसे% में निर्दिष्ट करते हैं तो फ़्लोट्स उनकी ऊंची की गणना उनके माता-पिता की ऊंचाई के आधार पर नहीं करते हैं। तो आपका 100% माता-पिता की ऊंचाई का उल्लेख नहीं करता है दृष्टिकोण जिसे आपको शायद पीछा करना चाहिए  स्थिति का उपयोग कर रहा है: निरपेक्ष; शीर्ष: 0; नीचे: 0;  के बजाय  float: left; ऊंचाई 100%;  केवल एक मुद्दा यह है कि माता-पिता (आपके मामले में  कंटेनर ) इसके किसी भी बच्चे की ऊंचाई के अनुसार नहीं बढ़ेगा फिर आपको या तो  कंटेनर  के लिए ऊंचाई निर्दिष्ट करनी चाहिए या उसके किसी भी बच्चे कॉलम नहीं करें  स्थिति: abosute  इसे आज़माएं:  
  & lt; div id = "कंटेनर" शैली = "चौड़ाई: 100%; ऊंचाई: 500 पिक्स; स्थिति: सापेक्ष;" & gt; & Lt; div id = "div1" शैली = "पृष्ठभूमि: नीला; स्थिति: पूर्ण; शीर्ष: 0; नीचे: 0; चौड़ाई: 1 9%;" & gt; & lt; / div & gt; & Lt; div id = "div2" शैली = "पृष्ठभूमि: लाल; स्थिति: निरपेक्ष; ऊपर: 0; नीचे: 0; चौड़ाई: 1%; बाईं: 1 9;; & gt; & Lt; img src = "toggle.gif" / & gt; & lt; / div & gt; & Lt; div id = "div3" शैली = "पृष्ठभूमि: हरा; स्थिति: निरपेक्ष; शीर्ष: 0; नीचे: 0; चौड़ाई: 80%; बाईं: 20%;" & gt; & lt; / div & gt;   
 जेएसफ़िल्ड: