दो div कॉलम। एक

Question

की गतिशील चौड़ाई जो मैं प्राप्त करने की कोशिश कर रहा हूं, वह एक-दूसरे के बगल में divs पर पहुंच जाती है। स्क्रीन के बाईं ओर एक मेनू, 150 पीएक्स चौड़ाई, और दूसरा, कंटेनर के बाकी को भरना चाहिए।

Thats क्या मैं के साथ आया था: http://jsfiddle.net/Ln49F/3/

लेकिन, संघर्ष div मेनू "के तहत" भी है, और पाठ के साथ काम है, यह आगे बढ़ एक छोटे से असंभव है सही करने के लिए। क्या यह संभव है कि किसी भी तरह से "100% - 150 पीएक्स" के लिए div "सामग्री" चौड़ा हो, और मेनू div के बगल में रखा जाए?

ऐसा ही कुछ प्राप्त करने के लिए: http://jsfiddle.net/Ln49F/4/ फ्लोट छोड़ दिया, div डालता है "के बगल में" मेनू div, और गद्दी में अच्छी तरह से काम करता है, लेकिन मुझे नहीं पता है कि यह कंटेनर div के आराम के लिए विस्तृत होने के लिए बनाने के लिए।

Answer 1

बाहर ले width:100% (बस जो डिफ़ॉल्ट है auto के लिए छोड़,) और इस का उपयोग करें:

div.content{ 
    margin-left:150px; 
    background: green;   
} 

jsfiddle।

Answer 2

लिखें इस तरह:

सीएसएस

.wrapper{ 
    overflow:hidden; 
    padding-bottom:10px; 
} 
.first{ 
    float:left; 
    height:200px; 
    width:150px; 
    background:red; 
} 
.second{ 
    overflow:hidden; 
    height:200px; 
    background:green; 
} 

एचटीएमएल

<div class="wrapper"> 
    <div class="first">first</div> 
    <div class="second">second</div> 
</div> 

चेक इस http://jsfiddle.net/TbRuB/10/

या

तुम भी display:table संपत्ति के साथ इस लक्ष्य को हासिल कर सकते हैं, लेकिन यह ऊपर IE8 & तक काम है।

चेक इस http://jsfiddle.net/TbRuB/12/

Answer 3

चेक this fiddle बाहर। असल में, box-sizing का उपयोग करके, कुछ पैडिंग और नकारात्मक मार्जिन, आप दो तत्वों को उनके कंटेनर के शीर्ष तक लाइन कर सकते हैं। और सामग्री बॉक्स अपने माता-पिता के विस्तार को फैलाता है।

Answer 4

div.container{ 
width: 90%; 
background: red; 
    display: inline-block;  
} 

div.menu{ 
width: 150px; 
float: left; 
background: blue; 
display: inline;  
} 

div.content{ 
    display: inline; 
    float: left; 
    width: 65%; 
    background: green; 
    padding-left: 20px;  
} 

look at this

मैं उम्मीद है कि इस मदद करता है

Answer 5

आप अपने पहले बेला देख सकते हैं, लेकिन अपने कल्पना, यहाँ के अनुसार काम करने के लिए अद्यतन: http://jsfiddle.net/ramsesoriginal/Ln49F/12/

यह सही मार्जिन को निर्दिष्ट करके काम करता है दूसरे div पर, और ऑटो पर चौड़ाई छोड़कर।

HTMLis अपरिवर्तित:

<div class="container"> 
    <div class="menu">Menu to the left</div> 
    <div class="content">Content of site<br>x<br><br><br><br><br></div> 
</div> 

और सीएसएस सुंदर तुम्हारा के समान है:

div.container{ 
     width: 90%; 
     height: 150px; 
     background: red;   
    } 

    div.menu{ 
     width: 150px; 
     height: 100px; 
     float: left; 
     background: blue;   
    } 

    div.content{ 
     margin-left: 150px; 
     background: green;   
    } 

मैं छीन लिया div.content से width: 100%; और margin-left: 150px; से बदल दिया आप देख सकते हैं, तो आप लगभग यह सही था!

संपादित करें: बोनस: (नकली) समान ऊंचाई कॉलम!

मैंने CSS3 के साथ "faux columns" बनाने के लिए कुछ कोड के साथ पहेली को अद्यतन किया, ताकि ऐसा लगता है कि दोनों divs कंटेनर के नीचे तक विस्तार कर रहे हैं। आप इसे यहां देख सकते हैं: http://jsfiddle.net/ramsesoriginal/Ln49F/13/ मुझे नहीं पता कि आपको वास्तव में इसकी आवश्यकता है या नहीं, लेकिन इस तरह के परिदृश्यों के लिए यह एक आम आवश्यकता है।

मैं बस एक ढाल पृष्ठभूमि कंटेनर पर एक सख्त रोक के साथ बीच में रख दिया गया,:

background: linear-gradient(left, blue 150px, green 150px); 

और फिर मैं विस्तार किया है कि विभिन्न विक्रेता उपसर्गों के साथ:

background: -moz-linear-gradient(left, blue 150px, green 150px); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(150px,blue), color-stop(150px,green)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, blue 150px, green 150px); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, blue 150px, green 150px); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, blue 150px, green 150px); /* IE10+ */ 
background: linear-gradient(left, blue 150px, green 150px); /* W3C */ 

मैं डॉन ' टी आपको पता है कि आपको इसकी आवश्यकता है, लेकिन कभी-कभी यह बहुत उपयोगी हो सकता है!

Answer 6

उपयोग सरल उपाय

<div class="container"> 
<div class="menu">Menu to the left</div> 
<div class="content">Content of site<br>x<br><br><br><br><br></div> 
</div> 

div.container{ 
width: 90%; 
height: 150px; 
background: red;   
} 

div.menu{ 
width: 150px; 
height: 100px; 
float: left; 
background: blue;   
} 

div.content{ 
background: green;   
margin-left: 150px; 
} 

http://jsfiddle.net/thirtydot/Ln49F/16/