但是，和書上說的做法不同，我是采用固定大小，然後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=)