但是，和书上说的做法不同，我是采用固定大小，然后float一个left一个right。书上也不错，先把Container和Side用in这个DIV括起来，in先margin:0 auto进行居中，并position:relative准备里面的div以它定位;里面的Container,width:500,position:absolute,top:0,left:0;右边的Side,margin:0 0 0 500px。这种思路也很巧妙。
以下是我的代码：
!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" />
style>
body{
background:#ffff99;
font:12px/1.5 Arial;
}
.rounded h2{
margin:0;
padding:20px 20px 10px 20px;
.rounded .main{
padding:10px 20px 10px 20px;
margin:-2em 0 0 0;
.rounded .footer{
.rounded .footer p{
padding:10px 20px 20px 20px;
.rounded{
background:url(images3/left-top.gif) top left no-repeat;
background:url(images3/right-top.gif) top right no-repeat;
background:url(images3/right.gif) top right repeat-y;
background:url(images3/left-bottom.gif) bottom left no-repeat;
background:url(images3/right-bottom.gif) bottom right no-repeat;
#header,#in,#pagefooter{
margin:0 auto;
#header.rounded, #in{
width:820px;
#container.rounded{
width:600px;
float:left;
#side.rounded{
width:200px;
float:right;
#pagefooter.rounded{
clear:both;
/style>
/head>
body>
div id="header" class="rounded">
h2>Header/h2>
div class="main">
p>
这是一行文本，这里作为样例，显示在圆角框。br />
这是一行文本，这里作为样例，显示在圆角框。
/p>
/div>
div class="footer">
这是版权信息文字。
/div>
div id="in">
div id="container" class="rounded">
h2>Container/h2>
div class="main">
p>
这是一行文本，这里作为样例，显示在圆角框。br />
这是一行文本，这里作为样例，显示在圆角框。
/p>
/div>
div class="footer">
这是版权信息文字。
div id="side" class="rounded">
h2>Side/h2>
div id="pagefooter" class="rounded">
h2>Pagefooter/h2>
/body>
/html>
<b>从中进行总结：</b>
<b> CSS很灵活，实现一个想法有多种方案，在不同条件下，这些方案有优有劣。千万别学的把自己僵住：认为书上的都是绝对正确的，任何条件下都可以的。别学傻了啊你。</b>
![Docker：安装Docker Compose[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)