مشکل با float و padding

[i-php-i]

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

لطفا بگید که چرا این مشکل ایجاد شده؟

.w2 { width:290px; padding: 5px; }
 .w1 { width:140px; padding: 5px; float:left;}
 <div class="w2">
      <div class="w1">1</div>
      <div class="w1">1</div>
      </div>

 

[talesh]

دوست گرامی اگه میشه یه توضیح کامل یا کدتو اینجا بزار ممنون

 

[i-php-i]

کد رو بصورت کامل گذاشتم.

الان تگهای فرزند بجای اینکه کنار هم قرار بگیرن، زیر هم قرار می گیرن.

 

[vahidd.com]

برای اینکه width کلاس w2 باید بیشتر از 290 باشه

 

[i-php-i]

برای اینکه width کلاس w2 باید بیشتر از 290 باشه

منظورتون اینه که باید پدینگ کلاس w2 رو حذف کنم و عرض اینکلاس رو روی 300 قرار بدم؟

 

[vahidd.com]

تقریبا
ببنین padding دایو اصلی از سمت چپ و راست 5 پیکسل هست و padding دو دایو داخلی که width اونا 5 پیکسل هست 140 پیکسله که به padding هر مقداری بدی به width هم اضافه میشه یعنی width دایو اصلی باید 310 پیکسل باشه