div با ارتفاع متغیر

[green_pm]

سلام

چطور میتونیم ارتفاع یک div را متغیر تعریف کنیم ،طوریکه با اضافه شدن متن یا عکس به آن ارتفاع آن زیاد شود، از طرفی Div هایی که در زیر آن قرار دارند ،هنگامیکه ارتفاع div بالایی زیاد می شود، به طرف پایین بروند،طوری که برای div پایینی مشکلی ایجاد نشود.

[mirmousavi.m]

<div style="position:relative; height:auto"> DIV </div>
پوزیشنش رو شک دارم، خودت تست کن، اگه نبود پس باید inherit باشه...

[green_pm]

روش شما را امتحان کردم ولی درست نشد.هنوزم div بالایی ،وقتی متنش زیاد میشه،از div که در پایینشه عبور میکنه.


<div align="center">
<div id="divMain">

<div style="width:100%; height:100px; background-color:#FFCCFF ">
<div style="width:100%; height:50px; background-color:#33CCCC"></div>
<div style="width:100%; height:50px; background-color:#999999"></div>
</div>

<div id="content" style="width:100%;background-color:#999966 ;height:300px;position:inherit">
<div style="width:255px; background-color:blue;height:300px;float:left">
<div style="width:255px; background-color:#FFFFCC; height:250px"></div>
<div style="width:255px; background-color:#FFFF66; height:auto;position:relative ">
ddddddddddddddd dfdddddddddddd
hhhhhhhhhhhhhhhhhhhbfbffcontent
bfbffcontentddddddddddddddd dfddddddddddddhhhhhhhhhhhhhhhhhhh
</div>
</div>
</div>

<div style="width:100%;background-color:black;height:auto;position: relative">sd</div>

</div>
</div>با هر دوش امتحان کردم.عکس خروجی را هم ضمیمه کردم.

[xoogle.ir]

روش شما را امتحان کردم ولی درست نشد.هنوزم div بالایی ،وقتی متنش زیاد میشه،از div که در پایینشه عبور میکنه.
با هر دوش امتحان کردم.عکس خروجی را هم ضمیمه کردم.
مشکل از اون div نیست!
شما اومدی و برای div های بالاتر ارتفاع 300 تنظیم کردی برای همین وقتی مجموع ارتفاع 2 div کناری از 300 بیشتر میشه این اتفاقی که میبینی میفته.
برای حل این مشکل خصوصیت height رو از div های بالایی پاک کن یا اونا رو برابر با auto قرار بده.

[mirmousavi.m]

درسته، و من هم منظورم اون divها بود...

[kamranafshar33]

دوست من به گمانم شما از فایر فاکس استفاده میکنید.

کد های ارسال شده شما رو کمی دستکاری کردم نتیجه عالی دادند خود شما هم یه بار امتحان کنید.




<div align="center">
<div id="divMain">
<div style="width:100%; height:100px; background-color:#FFCCFF ">
<div style="width:100%; height:50px; background-color:#33CCCC"></div>
<div style="width:100%; height:50px; background-color:#999999"></div>
</div>

<div id="content" style="width:100%;background-color:#999966;position:inherit">
<div style="width:255px; background-color:blue;float:left">
<div style="width:255px; background-color:#FFFFCC; height:250px"></div>
<div style="width:255px; background-color:#FFFF66;">
ddddddddddddddd dfdddddddddddd
hhhhhhhhhhhhhhhhhhhbfbffcontent
bfbffcontentddddddddddddddd dfddddddddddddhhhh hhhhhhhhhhhhhhh
</div>
</div>


<div style="width:100%;background-color:black;clear:both">sd</div></div>

</div>
</div>

[malekzad]

آقای سبز کار شما اصلا استاندارد نیست.
این صفحه ای که طراحی کردین به چه دردی می خوره؟
خب شما به جای اینکه اینقدر به خودتون زحمت می دادین اول چندتا Template ساده ی استاندارد پیدا می کردین بعد با دیدن source اونها نحوه تعریف یک قالب استاندارد دستتون میومد.
نمیگم کپی پست کنید نه منظورم این نیست.
به نظر من تازه کارایی مثل ما باید کارهای خوب رو ببینند بعد کارهایی بهتر از اون انجام بدن.