السلام عليكم
حشدت المصادر وجلست ادرس موضوع الصناديق ..
وجربت 

ومشيت مع الكود ويا حلاوتها من CSS ...
لكن كما يقولون الزين ما يكملش..
طلع النصف وتحديدا الفوتر ملخبط؟؟ 
مش كده وبس .. الديف الذي من المفروض ان يتمدد مع محتوياته من الديفات
لم يتمدد ..ليه مش عارف :con2:
واسمه con-body
وكمل الضغط عندي لما شفت التصميم بالاكسبلور..:funny::eek3:
الدنيا غير دنيا الفاير فوكس .. ما ادري مين فيهم الصح 
ايش المشكلة يا اخوان وكيف اخلي التصميم يتطابق مع كل المتصفحات؟
هذه محتويات ملف index.html
كود HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="style.css" />
<title>تجربة</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="all">
<div id="header" >
<div id="logo"><img src="1/images/Future_02.jpg" alt="" width="949" height="93" longdesc="index" /> </div>
<div id="flash">
</div>
</div>
<div id="con-body">
<div id="top-menu"> topmen</div>
<div id="left-block"> left</div>
<div id="con">
<p>con </p>
</div>
<div id="right-block"> right</div>
</div>
<div id="footer">
<div id="L-footer">
<div id="center">
</div>
</div>
<div id="R-footer">
</div>
</div>
</div>
</body>
</html>
وهذا الملف المدعو CSS
كود PHP:
body {
margin-top:0px;
background-color: #444444;
}
body, td, th {
color: #666633;
}
h1, h2 {
color: #663300;
}
h3, h4, h5, h6 {
color: #996633;
}
a {
color: #336600;
}
#all {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #333333;
text-align: left;
margin:0px auto auto auto;
padding-top:0px;
float: none;
height: auto;
width: 949px;
}
#header {
margin: 0px 0px 0px 0px;
}
#logo {
margin: 0px 0px 0px 0px;
width: 949px;
height: 93px;
background-color:#003366;
}
#flash {
margin:0px;
width: 949px;
height: 214px;
background-image:url(images/Future_04.jpg);
}
/*??? ????? ??????? ????? ??? ?????????? */
#con-body {
margin:0px 350px 0px 0px;
width: 949px;
height:auto;
background-color:#ffffff;
}
#top-menu {
margin:0px 0px 0px 0px;
width: 949px;
height:24px;
background-image:url(images/Future_07.jpg);
}
#left-block {
width:190px;
margin:5px 5px 5px 5px;
background-color:#006699;
float:left
}
#con {
width:549px;
float: left;
margin:5px 5px 5px 0px;
background-color:#ffffff;
}
#right-block {
margin:5px 5px 5px 0px;
float:right;
width:190px;
background-color:#CC99CC;
}
#footer {
width:auto;
height:30px;
background-image: url(images/Future_22.jpg);
margin:20px ;
}
#L-footer {
background-image:url(images/Future_21.jpg);
width:34px;
height:30px;
float:left;
margin: 0px 0px 0px 0px;
}
#R-footer {
background-image:url(images/Future_23.jpg)
width:34px;
height:30px;
float: right;
margin: 0px 0px 0px 0px;
}
افيدوني بالحل وجزاكم الله خيرا