[مشكلة] ارجوا توضيح اخطائي بمواضع العناصر في css

السلام عليكم و رحمة الله و بركاته

اخواني مشلتي بإختصار هي بموضع العناصر عند عرض التصميم (طبعا اقصد CSS)
اي بمعنى انني عندما اعرض التصميم بملئ الشاشة فلا مشكلة و يظهر التصميم كما هو مطلوب كالتالي : (لكن لاحظو العلامات الصفراء لأنها ستوضح مشكلتي في الصورة التي تليها)



اما عند تصغير شاشة المتصفح فإن العناصر تتداخل مع بعضها البعض و بعضها يختفي جزء منه و بعضها لا يبقى في الوسط كما في الصورة التالية : (لاحظو ايضا العلامات الصفراء)



و هذا هو كود ال CSS الذي كتبته :

رمز PHP:

body {
direction: rtl;
background: #FAFAFA;
font-family: Tahoma;
font-size: 13px;
text-shadow: 1px 1px 2px #000000;
}

.tab{
border: 1px double silver;
border-radius: 25px;
box-shadow: 10px 10px 5px #888888;
background-color: #f1f1f1;
position: absolute;
left:50%;
margin-top:220px;
margin-left:-250px;
padding:15px;
}

#pic {
border: 1px double silver;
border-radius: 10px;
box-shadow: 10px 10px 5px #888888;
background-color: #f1f1f1;
position: fixed;
left:50%;
margin-top:50px;
margin-left:-700px;
padding:15px;
width: 1120px;
height: 570px;
overflow: auto;
}

#footer {
border: 1px double silver;
border-radius: 10px;
box-shadow: 10px 10px 5px #888888;
position:fixed;
left:10px;
bottom:10px;
padding: 10px;
margin: 10px;
width:96%;
background: #F1F1F1;
color: gray;
}

.heading {
border: 1px double silver;
border-radius: 10px;
box-shadow: 10px 10px 5px #888888;
padding: 10px;
margin: 10px;
width:97%;
background: #F1F1F1;
color: gray;
text-align: center;
}

.minimal {
background: #e3e3e3;
border: 1px solid #bbb;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
-moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
-ms-box-shadow: inset 0 0 1px 1px #f6f6f6;
-o-box-shadow: inset 0 0 1px 1px #f6f6f6;
box-shadow: inset 0 0 1px 1px #f6f6f6;
color: #333;
font: bold 12px Tahoma;
line-height: 1;
padding: 8px 0 9px;
text-align: center;
text-shadow: 0 1px 0 #fff;
width: 190px;



}

.minimal:hover {
background: #d9d9d9;
-webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
-moz-box-shadow: inset 0 0 1px 1px #eaeaea;
-ms-box-shadow: inset 0 0 1px 1px #eaeaea;
-o-box-shadow: inset 0 0 1px 1px #eaeaea;
box-shadow: inset 0 0 1px 1px #eaeaea;
color: #222;
cursor: pointer;
}

.minimal:active {
background: #d0d0d0;
-webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
-moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
-ms-box-shadow: inset 0 0 1px 1px #e3e3e3;
-o-box-shadow: inset 0 0 1px 1px #e3e3e3;
box-shadow: inset 0 0 1px 1px #e3e3e3;
color: #000;
}

.sidebar {
width: 210px;
border: 1px solid #999;
border-radius: 10px;
box-shadow: 10px 10px 5px #888888;
padding: 10px;
margin-top: 50px;
margin-right: 10px;
}

.sidebar .headbar {
background-color: #999;
color: #FFF;
text-align: center;
padding: 5px;
font-weight: bold;
}

.sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}

.sidebar ul li {}

.sidebar ul li a {
display: block;
background-color: #FFF;
color: #555;
padding: 5px 7px 5px 7px;
text-decoration: none;
border-bottom: 1px solid #F1F1F1;
}
.sidebar ul li a:hover{
background-color: #F1F1F1;
color: #000;
border-bottom: 1px dotted #000;
}

ارجوا المساعدة و لكم جزيل الشكر







أكثر...