html - parent having padding for height and child not adopting its height? -

मुझे यह समस्या हो रही है

  .item {चौड़ाई: 800px; पृष्ठभूमि: # 000; प्रदर्शन: टेबल; } .text {float: left; पैडिंग: 30px 0; चौड़ाई: 100px; पृष्ठभूमि: #fff; शब्द-लपेटो: ब्रेक-शब्द; }। बॉक्स {चौड़ाई: 200px; सही नाव; ऊंचाई: 100%}  

  & lt; div class = "item" & gt; & Lt; span class = "text" & gt; जो भी कुछ भी हो जो कुछ भी हो जो कुछ भी हो जो कुछ भी हो जो कुछ भी हो जो कुछ भी हो जो कुछ भी हो जो भी हो, जो कुछ भी हो; & Lt; div वर्ग = "बॉक्स" & gt; asdsadasdasdasdasdsadasdasca wdasdw & lt; / div & gt; & Lt; / div & gt;  

बॉक्स में उसके माता पिता के समान ऊंचाई नहीं है।

< P>

हटाने का प्रयास करें

  .box {float: right; ऊंचाई: 100%; }  

और जोड़ना

  .box {display: table-cell; ऊर्ध्वाधर-संरेखण: शीर्ष; } 
 
 < पूर्व वर्ग = "स्निपेट-कोड-सीएसएस लैंग-सीएसएस टोपेप्रिंट-ओवरराइड">  .item {width: 800px; पृष्ठभूमि: # 000; प्रदर्शन: टेबल; } .text {float: left; पैडिंग: 30px 0; चौड़ाई: 100px; पृष्ठभूमि: #fff; शब्द-लपेटो: ब्रेक-शब्द; }। बॉक्स {चौड़ाई: 200px; पृष्ठभूमि: नीला; प्रदर्शन: टेबल-सेल; ऊर्ध्वाधर-संरेखण: शीर्ष; }  

  & lt; div class = "item" & gt; & Lt; span class = "text" & gt; जो भी कुछ भी हो जो कुछ भी हो जो कुछ भी हो जो कुछ भी हो जो कुछ भी हो जो कुछ भी हो जो कुछ भी हो जो भी हो, जो कुछ भी हो; & Lt; div वर्ग = "बॉक्स" & gt; asdsadasdasdasdasdsadasdasca wdasdw & lt; / div & gt; & Lt; / div & gt;