مشکل float:right

[olampiad]

سلام و خسته نباشید به دوستان عزیز
به این آدرس من برید .
http://www.stonetown.ir/gr/gr_about/33/%D9%85%D8%B9%D8%A7%D8%AF%D9%86-%D8%B3%D9%86%DA%AF

این آدرس هم همینطور هستش
http://www.stonetown.ir/agahi/agahi_about/%D8%A2%DA%AF%D9%87%DB%8C-%D9%87%D8%A7

تو این آدرس مشاهده میکنید که مربع هایی از محصولات موجود هستش .
همونطور هم که مشاهده میکنید ترتیب چیدمان این مربع ها به طور کامل بهم خورده است و مربع ها در صفحه پراکنده شده اند.
من برای این مربع ها از float استفاده کردم و float رو right گذاشتم.
هرکدوم از این مربع ها هم li هستش
کدی که من برای این مربع نوشتم رو براتن میزارم نگاه کنید ببینین چطوری میشه اینا رو چطوری مرتب کنم که زیر هم باشن .
ممنون


#galery ul{
width:100%;
direction:rtl;
list-style:none;
margin:0px;
padding:0px;
margin-top:-9px;
text-align:center;
}
#galery li{
position:relative;
max-width:165px;
width:100%;
border:1px solid #e1e1e1;
border-top:1px solid #f9c41c;
text-align:center;
margin:9px;
margin-top:29px;
float:right;
border-radius:3px;
}

[anvar]

مشکل از اینجاست که ارتفاع باکس ها با توجه به طول متن هر باکس تغییر میکنه و این موجب به هم ریختن چینش میشه
راه ساده اش اینه که می تونی به باکس ها (Li ها) ارتفاع ثابت بدی مثلا
min-height: 201px;

راه اصولیش استفاده از گرید هاست

http://gridbyexample.com/examples/