| 样我们预览页面的时候，三个div便会出现在同一行内。
接下来，我们要移动它们的位置。把primaryContent移动到160+10px的位置（10px）为间距，那么可以设置为
margin-left:170px;
把sendcondary依此向右移动，和primaryContent的距离也是10px，需要
margin-left:10px;
那么这个时sideContent已经被挤出content了，并且其左边缘正好是content的右边缘，因此我们要使用负的边距把它拉回到正常位置：
margin-left:-760px;
这样位置就正好了。
（自己查看运行效果）
<!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>
<title> div+css布局中的结构和表现分离 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { font-size:middle;font-family:Tahoma,Arial, Helvetica, sans-serif,"雅黑","宋体"; background-color:#999;}
div { background-color:#ccc; }
#wrap {
width:760px;
padding:10px;
margin:0 auto;
background-color:#fff;
}
#header {
height:100px;
}
#content {
height:300px;
margin-top:10px;
background-color:#fff;
}
#primaryContent {
float:left;
height:300px;
width:290px;
margin-left:170px;
}
#secondaryContent {
float:left;
height:300px;
width:290px;
margin-left:10px;
}
#sideContent {
float:left;
height:300px;
width:160px;
margin-left:-760px;
}
#footer {
height:100px;
margin-top:10px;
}
pre { font-family:tahoma; }
</style>
</head>
<body>
<div id="wrap">
<div id="header">header
&n |
