एचटीएमएल सीएसएस: चौड़ाई और खिंचाव चौड़ाई दो कॉलम लेआउट

Question

<div style="width: 800px; height: 600px"> 

    <div style="float:left; width: 100px"> 
     left fixed-width column 
    </div> 
    <div style="???"> 
     right stretching column (the width should be 700px in this case.) 
    </div> 

</div> 

दो कॉलम लेआउट बनाने का मानक तरीका क्या है जहां बायां एक निश्चित आकार है और दायां एक फैला हुआ है?

• मुझे लगता है कि दोनों कॉलम शैलियों स्वतंत्र हैं। मुझे यहां कुछ समाधान मिले, लेकिन यदि मैं बाएं कॉलम की चौड़ाई बदलता हूं, तो दाएं कॉलम की शैली (उदा। मार्जिन) को इसके साथ बदलना होगा।

• मुझे पुराने ब्राउज़र का समर्थन करने की आवश्यकता नहीं है। यदि यह मानक है, तो यह ठीक है।

Answer 1

दूसरे div में overflow: hidden लागू करें। यह एक नया block formatting context पेश करेगा। आप Can overflow:hidden affect layout? में कुछ और जानकारी पा सकते हैं।

jsFiddle Demo

Answer 2

तुम भी (और, एक ब्लॉक के रूप में उन्हें केंद्र यदि आप चाहें) एक div उपयोग कर सकते हैं दोनों स्तंभ रैप करने के लिए - तो, ​​पहले कॉलम की चौड़ाई निर्धारित करने और बनाने के लिए दूसरे स्तंभ पर पूर्ण स्थिति का उपयोग इसकी बाएं सीमा पहले कॉलम के किनारे और रैपर के किनारे की दाहिनी सीमा है।

<div style="width:auto; min-width:500px; margin:30px; position:relative; top:0px;"> 

<div style="width:100px; height:100px; padding:15px; background-color:aqua;"> 
</div> 

<div style="height:100px; padding:15px; position:absolute; top:0px; left:100px; right:0px; background-color:blue;"> 
</div> 

</div> 

JSFiddle