نحوه ساخت صفحه با div طوریکه با تغییر اندازه ی صفحه اندازه المانها تغییر کنه

[behnet]

سلام و خسته نباشید

من میخوام ی صفحه طراحی کنم که فقط با di طراحی بشه نه از table
ساختار صفحه هم میخوام جوری باشه که با تغییر اندازه ی صفحه اندازه المانها تغییر کنه

ساختار صفحه من سه ستونی ه ؛ یعنی 2 منو در چپ و راست و بخش مطلب در وسط اینها
واسه پیاده سازی این حالت من از div های تودرتو که باعث میشه با استفاده از خاصیت float بتونم ساختارشو درست کنم.

اولا این روش برای ساختار 3 ستونی مناسبه ؟

ثانیا :
کدی که استفاده کردم اینه که باعث میشه با زیاد شدن ارتفاع یکی از div های بخش وسط از کادر بیرون بزنه و به بخش footer بره
چه جوری میتونم کاری کنم که با زیاد شدن ارتفاع هر کدوم از دیوهای بخش میانی نه تنها ارتفاع دیو کلی وسط هم زیاد بشه (تا به فوتر نریزه) و هم بقیه ی div ها هم تا آخر div مادرشون ارتفاع پیدا کنند (یعنی ارتفاعشون برابر ارتفاع مادرشون بشه)


<div align="center" style="width:100% ; height:100% ;background-color:#f1f2f4">

<!--main div-->
<div align="center" style=" ;background-color:#f1f2f4; vertical-align: top;
max-width:1400px ;min-width:1000px ;width:auto !important ;width:1000px ;
max-height:100% ;min-height:800px ;height:auto !important ;height:auto ">

<!--banner div-->
<div align="center" style="background-color:#f1f2f4; vertical-align: middle;background-image: url(banner.jpg);
width:100% ;
max-height:200px ;min-height:143px ;height:auto !important ;height:143px ; ">
</div>

<!--body div-->
<div align="center" style="background-color:Yellow ;
width:100% ;
max-height:100% ;min-height:100% ;height:auto !important ;height:auto ">

<!--left div kol-->
<div style="float:left ; background-color:Fuchsia;
width:80%;
height:auto">


<!-- div left.menu-->
<div style="float:left;background-color:#eff0f2;
width:25%;
height:100%">
left menu
</div>

<!-- div news-->
<div style="float:right;background-color:Olive;
width:75%;
height:100%">
news
</div>

</div>

<!--right div kol-->
<div style="float:right ; background-color:#eff0f2;
width:20%;
height:auto">
right menu

<!--right.menu div -->
<div style="background:blue;
width:100%;
height:100%">
m
</div>

</div>



</div>

<!--footer div-->
<div align="center" style="background-color:red; vertical-align: middle;
width:100% ;
max-height:100px ;min-height:100px ;height:auto !important ;height:100px ;">
footer
</div>

</div>


<br />
</div>

ممنون

[emad_67]

سلام
این روشی که شما استفاده کردی مشکلات زیادی ایجاد میکنه و پیچیدگیش هم بیشتره. ساده ترین راه برای طرح 3 ستونی اینه که ستون های سمت راست و چپ رو در یک div و به صورت absolute در بیاری و موقعیت اونا رو تنظیم کنی. div وسط صفحه رو هم ثابت در نظر بگیری. با این روش دیگه نیازی به div های تو در تو هم نیست. برای اینکه میگی میخوای با تغییر اندازه صفحه اندازه المان ها هم تغییر کنن، باید div وسط رو با margin-left و margin-right فاصله اونو از دیواره های سمت راست و چپ تنظیم کنی.
همچنین بهتره از css برای تنظیم موقعیت ها استفاده کنی مثلا برای تنظیم div شما اینو استفاده کردی:


<div align="center"

که خوب الان دیگه استفاده از align مرسوم نیست اصلا. و بهتره در حین ساخت طرحت رو در مرورگر ها مختلف چک کنی. الان این چیزی که ساختی توی ie فقط درسته و توی ff خیلی فرق داره با چیزی که شما مد نظر بوده.

[behnet]

ممنون بابت راهنماییاتون
ولی من هنوز کامل نفهمیدم باید چه کار کنم

میشه ی نمونه کد بزارین که بهم کمک کنه

[Exception]

این که بخوای ارتفاع یک div با یک div دیگه تنظیم بشه هم کار ساده ای نیست.
برای نمونه اینها رو ببین:
http://positioniseverything.net/articles/onetruelayout/equalheight
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
http://articles.techrepublic.com.com/5100-10878_11-5268973.html
http://redmelon.net/tstme/3cols2/

این طراحی که کردی هم مشکل زیاد داره. حتما سعی کن با چند تا browser چک کنی. اما اگر الان فقط میخوای همین مشکلت حل بشه، میتونی این کار رو بکنی.
تو این خط:

<!--right div kol-->
<div style="float:right ; background-color:#eff0f2;width:20%;height:auto">

این تغییر رو بده:

<!--right div kol-->
<div style="float:right ; background-color:#eff0f2;width:20%;height:100%;overflow:hidde n;">

[behnet]

Exception عزیز ممنون بابت راهنماییت...

صفحه ها رو میخونم اگه ل پیش اومد میام میپرسم

از همه دوستان ممنون