چیدمان Div ها در یک خط نیست

[اوبالیت به بو]

سلام

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



.littlebox {
background-color: #D7FFD7;
border: 2px solid #8BE68B;
border-radius: 5px 5px 5px 5px;
display: inline-block;
padding: 0 15px;
margin-left:20px;
margin-right:10px;
margin-bottom:5px;
text-shadow: 1px 1px 1px silver;
}


و کد باکس مربوط به باکس بزرگ که اخبار و مقالات و گالری درون اون قرار گرفتند:



.box {
background-color: #E9E9E9;
border: 1px solid #357987;
border-radius: 8px 8px 8px 8px;
color: #000000;
float: right;
font-size: small;
height: 500px;
margin-left: 10px;
margin-top:10px;
position: relative;
text-align: right;
width: 30%;
}


و div ها به این صورت هست:



<div id="news">
<div>
<span class="littlebox">اخبار</span>
</div>
<div class="box">
Grid View
<div>
<a href="News.aspx">بیشتر...</a></div>
</div>
</div>
<div id="Articles">
<div>
<span class="littlebox">مقالات</span>
</div>
<div class="box">
Grid View
<div>
<a href="Articles.aspx">بیشتر...</a></div>
</div>
</div>
<div id="Gallery">
<div>
<span class="littlebox">گالری</span>
</div>
<div class="box">
GridView
<div>
<a href="Albums.aspx">بیشتر...</a></div>
</div>
</div>

[pary_daryayi]

كدهاتونو كامل نزاشتيد ولي بطور كلي براي اينكه سه تا دايو كنار هم قرار بگيرند اين كار رو انجام بديد :

1. يك دايو اصلي مثلا به نام main ايجاد كنيد .

2.دايو اخبار رو درون دايو main بزاريد با float:right

3. بعد دايو مقالات رو درون دايو main بزاريد با float:right

4. بعد دايو گالري رو درون دايو main بزاريد با float:left
.
و بقيه تنظيمات ..

[اوبالیت به بو]

درود بر شما برای div مربوط به main چه تنظیماتی باید انجام بدم؟ فقط کافیه یک div main داشته باشم؟ یا باید ویژگی هایی رو بهش نسبت بدم؟

[tamafi6]

فقط کافیه
float:left; رابه littlebox .اضافه کنی هرطرف بدی شناورمیشه

[pary_daryayi]

این مثال رو ببینید و ایده بگیرید:
css :


.main{width:400px; min-height:200px; overflow:hidden; background-color:#000000}
.right{width:25%; min-height:180px; background-color:#CC0000; float:right}
.center{width:50%; min-height:180px; background-color:#CC00ff; float:right}
.left{width:25%; min-height:180px; background-color:#CCff00; float:left}


html :


<div class="main">
<div class="right"></div>
<div class="center"></div>
<div class="left"></div>
</div>

البته میشه کدهای css رو به روش والد - فرزند خلاصه تر نوشت . ولی من چون تو IE یکبار امتحان کردم و تنظیم نبوده اینطور مینویسم.