نحوه طراحی چنین الگویی

[ali_mnkt]

با سلام
دوستان به عکس زیر توجه کنید :

97520

من می خوام یک سایت 3 ستونه با <div> طراحی کنم . در این شکل ناحیه سبز محتوای اصلی هست و ناحیه های صورتی و زرد ستون های ما هستن . در اینجا من از float استفاده کردم ولی مشکلی که دارم و در شکل هم مشخصه با زیاد شدن ستون های زرد و صورتی قسمت content ( قسمت سبز رنگ ثابته ) خوب دلیلش هم واضحه چون از float استفاده کردم . کسی می تونه راهکاری برای حل این مشکل ارائه کنه یعنی با بلند شدن ستون های صورتی و زرد قسمت زمینه یعنی سبز رنگ هم بلند بشه ؟ یا راهکار جدیدتری ارائه کنه ؟

کدهای طراحی رو هم براتون می ذارم



<div id="main" style="width: 100%" align="center">
<div id="mainContent" style="width: 990px; background-color: #808000; height: 200px;">
<div id="right" style="float: right; width: 200px; background-color: #FF00FF; height: 300px;">
</div>
<div id="left" style="background-color: #FFFF00; width: 200px; float: right; height: 300px;">

</div>
</div>
</div>

[2undercover]

همه ی این دایو ها رو توی یک دایو اصلی بزارید و به همه ی این دایو ها height رو برابر با 100% بزارید!

[ali_mnkt]

همه ی این دایو ها رو توی یک دایو اصلی بزارید و به همه ی این دایو ها height رو برابر با 100% بزارید!

دوست عزیز درست نشد . ببین این سه ستون ، سه ستون سایت من هستش . من در هر کدام این این ها می خوام المان هایی رو قرار بدم پس هر کدوم که المان بیشتری داشته باشه باید ارتفاع بیشتری داشته باشه و بیشتر کش بیاد . با طراحی که کدش رو گذاشتم مشکلی از لحاظ کش اومدن ارتفاع ندارم اما چون از float استفاده کردم با کش اومدن ستون ها div زمینه ارتفاعش رو با ستونی که بیشترین ارتفاع رو داره یکسان نمی کنه من چطور می تونم بر اساس ستونی که بیشترین ارتفاع رو داره div پس زمینه که اسمش mainContent هست رو کش بدم ؟

[caspianhero]

سلام : گمان کنم با position:relative بشه: مثلا اگه یک دایو اصلی بزاری و 3 ستون را بندازی توش: بعدش هم position دایو پدر را relative و position دایو فرزند را absolute کنی یعنی سه ستون اصلی : شاید درست بشود!!

[ali_mnkt]

سلام : گمان کنم با position:relative بشه: مثلا اگه یک دایو اصلی بزاری و 3 ستون را بندازی توش: بعدش هم position دایو پدر را relative و position دایو فرزند را absolute کنی یعنی سه ستون اصلی : شاید درست بشود!!

مرسی دوست عزیز از توجهت . می شه کدش رو بذاری ؟

[ali_mnkt]

کسی نمی تونه کمک کنه ؟

[soft-web]

با استفاده از جی کوئری می تونی اینکار و بکنی.
چند روز پیش با این مشکل روبرو شدم تمام راه حل های پیشنهادی دوستان(درcss) رو امتحان کردم ولی مشکلم حل نشد(شاید من نتونستم البته )
ولی بعد دیدم استفاده از ج ک خیلی راحتره:
function fixH() {


var a = $("#content").height();

var b = $("#sidebar1").height();

if(a>b){
var a = $("#content").height();
$("#sidebar1").css("min-height", a);
}
else
if(a<b){
$("#content").css("min-height",b);}

}




window.onload=function(){
fixH('leftcolumn','rightcolumn');

}
من واسه دو ستون نوشتم شما تغییرش بده واسه سه ستون.
اگه بلد نبودی استفاده شو بگو

[css-man]

پائینه ان دیو ها از clear:both استفاده کن