عدم تغییر ارتفاع یک div نسبت به div دیگر

[Helen_Farhani]

دوستان عزیز، من نمیدونم CSS زیر را چطور تغییر بدم که ارتفاع div سبز رنگ نسبت به ارتفاع div قهوه ای تغییر بکند.

#content {
	background-color:#f2eec9;
	border-top:1px solid #6d731b;
	border-bottom:1px solid #6d731b;
	min-height: 100%;
	padding:20px;
}

#right_content {
	width:200px;
	float:right;	
	background-color:#003399;
	margin:0 0 0 0;
	bottom:0;
}

#center_content {
	width:500px;
	float:left;
	background-color:#663300;
}

درواقع div قهوه ای در داخل div سبز قرار گرفته است.

      <div id="content">
        <div id="center_content"></div>
        <div id="right_content"></div>
      </div>

 

[marSoul]

شما چطور می خواهید ارتفاع را تغییر بدهید ؟

 

[Helen_Farhani]

با قرار گرفتن "محتوا" در div قهوه ای.
مثلا:

      <div id="content">
        <div id="center_content">
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        </div>
        <div id="right_content"></div>
      </div>

 

[amirabbas_p30magazine]

با این کد فکر کنم درست بشه

      <div id="content">
        <div id="center_content"></div>
        <div id="right_content"></div>
<div style="clear: both;"></div>
      </div>

 

[Helen_Farhani]

بله حق با شما هست. مشکل برطف شد. اما میشه در این مورد یک توضیح مختصر بدین؟

 

[amirabbas_p30magazine]

وقتی شما به یه div خصوصیت float رو اختصاص بدید. اون div دیگه یه عنصر داخل صفحه محسوب نمیشه و از داخل کد صفحه خارج میشه و در یک لایه دیگه render میشه. در اصل اون div که float داره دیگه داخل عنصر وارد خودش نیست. الان شما دو تا div داخل دارید که هر دو تاش float دارند. در این حالت دیگه این دو تا div داخل اون div والد نیستند و از اون خارج شدن. به همین خاطر div والد از اونجایی که دیگه چیزی توش نیست ، جمع میشه میره بالا.
برای اینکه مشکل رو حل کنیم یه div جدید زیر اون دو تا div قبلی ایجاد می کنیم و خصوصیت و مقدار clear:both بهش میدیم. این دستور یعنی این که این div باید جایی تو صفحه قرار بگیره که هیچی عنصر float داری در سمت چپ و یا راستش قرار نداشته باشه. به همین خاطر این div اینقدر پایین میره که زیر اون دو تا div که float دارن قرار میگیره و از اونجایی که این div آخریه دیگه float نداره، هنوز داخل div والد هستش و از جمع شدن div والد جلوگیری میکنه

نمی دونم تونستم منظور رو برسونم یا نه

 

[Helen_Farhani]

نمی دونم تونستم منظور رو برسونم یا نه

به بهترین شکل ممکن.