چگونگی قرار گرفتن دو div با سایز 100% کنار هم...

[nimja145]

سلام
چطور دو تا div که عرض یکی از اونها مثلا 200px و عرض یکی دیگه 100% هست کنار یکدیگر قرار بدهم؟

[lady64]

راه درست قرار دادن دو دایو در کنار هم اینه که یک دایو اصلی رو در نظر بگیرید و این دو دایو رو داخل اون دایو اصلی تعریف کنید . float یکی رو right و دیگری رو left تعریف کنید و به هر کدوم عرض دلخواه رو بدید.



<style>
#main { width:500px;
min-height:200px;
}
#right
{width:40%;
height:200px;
background-color:#CC3300;
float:right;
}
#left
{

width:60%;
height:200px;
background-color:#FF9999;
float:left;
}

</style>

<div id="main">
<div id="right"></div>
<div id="left"></div>
</div>


میتونید عرض یکی رو با توجه به این مثال 200px و دیگری رو 300px تعریف کنید . ولی اگر یکی رو 100٪ تعریف کنید به این معنی هست که تمام عرض دایو اصلی رو در بر بگیره که این برای قرار گرفتن دو دایو در کنار هم منطقی به نظر نمیرسه. امتحان کنید !!

[nimja145]

مرسی از پاسختون .. ولی سوال من اینه که میخواهم عرض این div تمام صفحه باشه...
کد زیر وقتی مینویسم div ]ا کنار همدیگه قرار نمیگیرند .. بلکه بالا و پایین قرار میگیرند


<style>
#main { width:100%;
min-height:200px;
}
#right
{width:150px;
height:200px;
background-color:#CC3300;
float:right;
}
#left
{

width:100%;
height:200px;
background-color:#FF9999;
float:left;
}

</style>

<div id="main">
<div id="right"></div>
<div id="left"></div>
</div>

[lady64]

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

[nimja145]

مثلا همین باکس مطالب فروم نگاه کنید... قسمت مشخصات نویسنده یک عرض ثابتی داره و لی قسمت پاسخ سایزش ثابت نیست.. و برای رزولیشن های مختلف تمام عرض صفحه رو پر میکنه.....

[lady64]

بنظرم درستش اینه که شما هر دو رو بصورت درصد تعریف کنید .دایو اصلی رو هم 100٪ بگیرید. اینطور برای رزولیشون های مختلف مشکلی ایجاد نمیکنه.

[Saber Mogaddas]

سلام
دوست عزیز دقت کنید که دیوی اصلی wraper اصلی سایت برنامه نویس (Body) دارای استایل زیر :

min-width: 960px; width: auto;


می باشد.این استایل یعنی چی یعنی width برابر با auto هست یعنی نسبت به عرض مرورگر تغییر خواهد کرد نقطه این استایل تو min-width خلاصه میشه به این صورت که همزمان با این که body دارای عرض auto می باشد کوچکترین سایزی که برای عرض می تونه داشته باشه 960px می باشد.
با در نظر گرفتن این موضوع می خواهیم قسمت هر post رو طراحی کنیم :
همانطور که دوست عزیزمون مطرح کردن باید برای این دو دیو یک دیو اصلی ایجاد کنیم..عرض دیو اصلی برابر با 100% خواهد شد ولی به این صورت هست که در بالا گفتیم نمیتونه کوچکتر از 960px باشه..
خوب حالا برای قسمت مشخصات کاربر از یک عرض ثابت برای مثال 200px استفاده می کنیم و برای قسمت دیو با عرض متغییر عرضی تعریف نخواهیم کرد چون دیو سمت راستی دارای float:right هست و مسلما دیو ما در سمت چپ قرار خواهد گرفت.
برای مثال با این تعریف همچین چیزی طراحی کنید در صورت بروز مشکل در همین تاپیک بپرسید..
موفق باشید.

[nimja145]

ممنون درست شد