مشكل در ساخت يك Box براي اندازه هاي مختلف

[amin_alexi]

با سلام خدمت دوستان
من مي خوام يك Box تعريف كنم و از اون در جاهاي مختلف استفاده كنم (مثلا به عنوان اخبار ، لينكها و ...)
و نمي خوام يك Header بزارم كه كلا عكس باشه ، چون اگه ابعاد مختلف باشه مجبورم براي ابعاد مختلف سايز Header رو تغيير بدم
يك چيزي گذاشتم اما در سايز هاي مختلف درست كار نمي كنه !
نمي دونم
ممنون مي شم دوستان راهنمايي كنن !
البته چون من دارم به صورت Dynamic كد مينويسم و يك Box رو در يك جا نوشتم و مي خوام اون رو هر جا گذاشتم ظاهرش يك جور باشه
واسه هميم به جاي px از % مي خوام استفاده كنم

فايلها خودم رو هم Attach كردم


body
{
background: #FFFFFF;
padding: 10px 10px 10px 10px;
}

.tdBoxNews
{
padding: 0px 0px 0px 0px;
height: 30px;
font-family: Tahoma;
font-size: 12px;
font-weight: bold;
}
.BoxBody
{
padding: 0px 0px 0px 0px;
text-align:right;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-right-color: #d6d6d6;
border-bottom-color: #d6d6d6;
border-left-color: #d6d6d6;
font-family: Tahoma;
font-size: 12px;
}
.BoxLeft
{
float:left;
padding: 0px 0px 0px 0px;
height: 30px;
width: 1%;
background-image: url('NewsTopLeft.png');
}
.BoxRight
{
float:right;
padding: 0px 0px 0px 0px;
height: 30px;
width: 1%;
background-image: url('NewsTopRight.png');
}
.BoxMiddle
{
float:left;
padding: 0px 0px 0px 0px;
height: 30px;
width: 98%;
background-image: url('NewsTopMiddle.png');
font-family: Tahoma;
font-size: 12px;
font-weight: bold;
text-align:center;
}






<div style="width:1000px; text-align:center; float:right">
<div class="BoxLeft">
</div>
<div class="BoxMiddle">
اخبار
</div>
<div class="BoxRight">
</div>
<div class="BoxBody">
1 line
<br />
2 line
<br />
3 line
<br />
4 line
<br />
</div>
</div>


<div style="width:200px; text-align:center; float:left">
<div class="BoxLeft">
</div>
<div class="BoxMiddle">
اخبار
</div>
<div class="BoxRight">
</div>
<div class="BoxBody">
1 line
<br />
2 line
<br />
3 line
<br />
4 line
<br />
</div>
</div>

<div style="width:880px; text-align:center; float:right">
<div class="BoxLeft">
</div>
<div class="BoxMiddle">
اخبار
</div>
<div class="BoxRight">
</div>
<div class="BoxBody">
1 line
<br />
2 line
<br />
3 line
<br />
4 line
<br />
</div>
</div>

[hossin.esm]

من کد را تغییر دادم و به جای % از px استفاده کردم . و با position این کار رو کردم

[amin_alexi]

ممنون از جوابتون :چشمک:
الان يك مشكل هست!
چون صفحات من Dynamic ايجاد ميشه و 2 زبانه است !
وقتي dir="rtl" مي كنم ظاهرش يك مقداري به هم ميريزه !
ميشه كاري كرد كه تو هر 2 حالت بدون مشكل كار كنه ؟

[hossin.esm]

خواهش میکنم
کد left:0px; را به بلاک .BoxLeft در فایل css اضافه کنید مشکل حل میشه