تنظیم اتوماتیک ارتفاع div

سلام

اول شکل پیوست رو ببینید:

[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

خب. حالا من میخوام ارتفاع MainDiv به ارتفاع TopDiv وابسته بشه، یعنی با افزایش ارتفاع TopDiv، این div از MainDiv بیرون نزنه و به عبارتی ارتفاع MainDiv بطور خودکار تنظیم بشه.
در ضمن TopDiv هم float شده.
ممنون

[HTML]
<div title="main" style="background: #CCCCCC ; width: 500px ; padding: 10px">

<div title="top" style="background: #000066; width: 200px; color: white; padding: 2px; text-align: justify; float: left">
With an Internet connection and Internet Explorer, you can find and view information about anything on the web. Just click the topics below to get started.
<br><br><br><br><br>
</div>

<div style="text-align: justify">
With an Internet connection and Internet Explorer, you can find and view information about anything on the web. Just click the topics below to get started.
</div>

</div>
[/HTML]

جوابمو پیدا کردم

محان جان این ساختار تو قالب وبلاگ استفاده میشه و دایوها با کدهای xml پر میشن که ارتفاع های متفاوتی دارن و این کدی که شما نوشتی نمیتونه جواب خوبی بده. من overflow:hidden رو گذاشتم توی main و همه چیز ردیف شد.

::یا علی::

متوجه نشدم بیشتر توضیح دهید یعنی ارتفاع main با توجه به ارتفاع top تغییر میکنه؟

نقل قول:

---

نوشته شده توسط m@mad [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

متوجه نشدم بیشتر توضیح دهید یعنی ارتفاع main با توجه به ارتفاع top تغییر میکنه؟

---

دوست عزیز منظور من کاملا واضحه، لطفا با دقت بخونید.

مشکل من اینه که از دو تا مسترپیج تو در تو استفاده کردم که اولی header و footer رو شامل میشه دومی ستون چپ و ستون راست و در نهایت محتوای صفحه ها در مرکز تغییر می کنه حالا مشکلم اینکه می خوام برای صفحه سایه قرار بدم ولی نمی شه یعنی فقط چند پیکسل سایه تکرار میشه به نظر شما چه راه حلی وجود داره؟

[HTML]
html{height:100%;}
body
{height:100%;
background:url(images/bg.jpg) repeat-x #e4e9ec top;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
margin:auto;
color:#000;
}
#center
{width:1024px;
height:100%;
margin:auto;}
#main_container{
width:1000px;
float:left;
height:auto;
margin:auto;
padding:0px;
background-color:#FFFFFF;
}
.shadow_L
{height:100%;
background-image: url('images/Shadw_left.png');
background-repeat: repeat-y;
float: left;
width: 12px;
}
.shadow_R
{
height: 100%;
background-image: url('images/Shadw_right.png');
background-repeat: repeat-y;
float: right;
width: 12px;
}
[/HTML]

شما کارتون اشتباه بود که overflow رو hidden کردین! با اینکار محتویات مخفی میشن!

راه حال شما اینه!

بعد از بسته شدن تگTopDIv این عبارت رو قرار بدین:

[HTML]
<div style="clear:both"></div>
[/HTML]