【效果】
【HTML】
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Debug="true" StylesheetTheme="Default" %>
<!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 runat="server">
<title>左中右版式</title>
</head>
<body>
<form id="form1" runat="server">
<div id="wrap">
<div id="header">header</div>
<div id="container">
<div id="left_side">left_side</div>
<div id="content">content</div>
<div id="right_side">right-side</div>
</div>
<div id="footer">footer</div>
</div>
</form>
</body>
</html>
【CSS】
#wrap{
width:700px;
margin:0 auto;
}
#header{
margin:20px;
height:80px;
border:solid 1px #0000FF;
}
#container{
position:relative;
margin:20px;
height:400px;
}
#left_side{
position:absolute;
top:0px;
left:0px;
border:solid 1px #0000FF;
width:170px;
height:100%;
}
#content{
margin:0px 190px 0px 190px;
border:solid 1px #0000FF;
height:100%;
}
#right_side{
position:absolute;
top:0px;
right:0px;
border:solid 1px #0000FF;
width:170px;
height:100%;
}
#footer{
margin:20px;
height:80px;
border:solid 1px #0000FF;
}
【說明】
典型的DIV＋CSS布局——固定寬度且居中的版式中，運用的是浮動屬性；這個實例，則運用了絕對定位屬性。
1、在#container中設置“position:relative;”，其作用是使得后面的絕對定位的基准為#container而不是以瀏覽器為其准。
2、左側列#left_side和右側#right_side列采用絕對定位，並且固定這兩個div的寬度，而中間列#content由於需要根據瀏覽器自動調整，因此不設置類似屬性。
但由於另外兩個塊的position屬性設置為absolute，此時必須將它的margin-left和margin-right屬性都設置為190px。
3、左中右布局，也可以運用浮動屬性，具體可參考典型的DIV＋CSS布局——固定寬度且居中的版式。
【參考文獻】
李卓群.網頁設計實例教程[M].北京:清華大學出版社,2010:194-197.
溫謙.CSS設計徹底研究[M].北京:人民郵電出版社,2008.（附：電子書下載地址）
SHEA D.CSS禪意花園[M],北京:人民郵電出版社2007.（附：電子書下載地址）