變寬度佈局
1-2-1 等比例變寬
總寬度設置 width: 85%; min-width: 650px; （關於IE6的min-width支持，可用）
content 設置 width: 66%; float: left;
side 設置 width: 33%; float: right;
加入clear 空div
HTML 結構：
<!DOCTYPE HTML>
<html>
<head>
<title>1-2-1 等比例變寬</title>
<meta charset="utf-8" />
</head>
<body>
<div id="header">
<p>Header</p>
</div>
<div id="container">
<div id="content">
<h2>Content Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
<div id="side">
<h2>Side Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
<div id="clear"></div>
</div>
<div id="footer">
<p>footer footer footer footer footer footer footer footer</p>
</div>
</body>
</html> body{
font: 13px/1.5 Arial;
margin: 0;
padding: 0;
}
#header, #container, #footer{
width: 85%;
margin: 10px auto;
min-width: 650px;
}
#header{
border: 1px solid black;
background-color: #666;
}
#content{
border: 1px solid black;
background-color: #999;
width: 66%;
float: left;
}
#side{
border: 1px solid black;
background-color: #999;
width: 33%;
float: right;
}
#clear{
clear: both;
}
#footer{
border: 1px solid black;
background-color: #CCC;
}1-2-1 單列變寬
side 固定寬度，content 隨窗口寬度變化
side設置 width: 200px; float: left;
在content外層加入 contentWrap，contentWrap 設置爲 width: 100%; margin-right: -220px; float: right;
而content 設置爲 margin-right: 220px;
這樣就利用了wrap實現了content的寬度爲 100%-320px
HTML 結構：
<!DOCTYPE HTML>
<html>
<head>
<title>1-2-1 單列變寬</title>
<meta charset="utf-8" />
</head>
<body>
<div id="header">
<p>Header</p>
</div>
<div id="container">
<div id="contentWrap">
<div id="content">
<h2>Content Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
</div>
<div id="side">
<h2>Side Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
<div id="clear"></div>
</div>
<div id="footer">
<p>footer footer footer footer footer footer footer footer</p>
</div>
</body>
</html>CSS：
body{
font: 13px/1.5 Arial;
margin: 0;
padding: 0;
}
#header, #container, #footer{
width: 85%;
margin: 10px auto;
min-width: 700px;
}
#header{
border: 1px solid black;
background-color: #666;
}
#contentWrap{
width: 100%;
margin-right: -220px;
float: right;
}
#content{
border: 1px solid black;
background-color: #999;
margin-right: 220px;
}
#side{
border: 1px solid black;
background-color: #999;
width: 200px;
float: left;
}
#clear{
clear: both;
}
#footer{
border: 1px solid black;
background-color: #CCC;
}1-3-1 單側列寬固定
nav 固定寬度 width: 200px; float: left;
在content 和 side 外層加入兩層 div：outerWrap 和 innerWrap
outerWrap 設置爲 width: 100%; margin-right: -210px; float: right;
innerWrap 設置爲 margin-right: 210px;
然後content 和 side 相當於在 innerWrap 內部等比例變寬
HTML結構：
<!DOCTYPE HTML>
<html>
<head>
<title>1-3-1 單側列寬固定</title>
<meta charset="utf-8" />
</head>
<body>
<div id="header">
<p>Header</p>
</div>
<div id="container">
<div id="nav">
<h2>Nav Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
<div id="outerWrap">
<div id="innerWrap">
<div id="content">
<h2>Content Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
<div id="side">
<h2>Side Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
</div>
</div>
<div id="clear"></div>
</div>
<div id="footer">
<p>footer footer footer footer footer footer footer footer</p>
</div>
</body>
</html>CSS：
body{
font: 13px/1.5 Arial;
margin: 0;
padding: 0;
}
#header, #container, #footer{
width: 85%;
margin: 10px auto;
min-width: 800px;
}
#header{
border: 1px solid black;
background-color: #666;
}
#nav{
border: 1px solid black;
background-color: #999;
width: 200px;
float: left;
}
#outerWrap{
width: 100%;
margin-right: -210px;
float: right;
}
#innerWrap{
margin-right: 210px;
}
#content{
border: 1px solid black;
background-color: #999;
width: 66%;
float: left;
}
#side{
border: 1px solid black;
background-color: #999;
width: 33%;
float: right;
}
#clear{
clear: both;
}
#footer{
border: 1px solid black;
background-color: #CCC;
}1-3-1 中間列寬固定
content 寬度固定
在 nav 和 side 分別加上外層 div ：navWrap 和 sideWrap
navWrap 設置爲 width: 50%; margin-left: -210px; float: left;
nav 設置爲 margin-left: 210px;
同理，sideWrap 和 side 也做類似的設置
HTML結構：
<!DOCTYPE HTML>
<html>
<head>
<title>1-3-1 中間列寬固定</title>
<meta charset="utf-8" />
</head>
<body>
<div id="header">
<p>Header</p>
</div>
<div id="container">
<div id="navWrap">
<div id="nav">
<h2>Nav Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
</div>
<div id="content">
<h2>Content Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
<div id="sideWrap">
<div id="side">
<h2>Side Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
</div>
<div id="clear"></div>
</div>
<div id="footer">
<p>footer footer footer footer footer footer footer footer</p>
</div>
</body>
</html>CSS：
body{
font: 13px/1.5 Arial;
margin: 0;
padding: 0;
}
#header, #container, #footer{
width: 85%;
margin: 10px auto;
min-width: 700px;
}
#header{
border: 1px solid black;
background-color: #666;
}
#navWrap{
width: 50%;
margin-left: -210px;
float: left;
}
#nav{
border: 1px solid black;
background-color: #999;
margin-left: 210px;
}
#content{
border: 1px solid black;
background-color: #999;
width: 400px;
float: left;
margin-left: 10px;
}
#sideWrap{
width: 49.9%;
margin-right: -210px;
float: right;
}
#side{
border: 1px solid black;
background-color: #999;
margin-right: 210px;
}
#clear{
clear: both;
}
#footer{
border: 1px solid black;
background-color: #CCC;
}1-3-1 雙側列寬固定
nav 和 side 寬度固定
nav 設置爲 width: 200px; float: left;
在 content 和 side 外層加上 outerWrap 和 innerWrap ，這樣就相當於單列固定寬度的設置，nav 固定寬度
然後再在 content 外層加上 contentWrap ，也相當於在 innerWrap 內部單列固定寬度設置，side 固定寬度
HTML 結構：
<!DOCTYPE HTML>
<html>
<head>
<title>1-3-1 雙側列寬固定</title>
<meta charset="utf-8" />
</head>
<body>
<div id="header">
<p>Header</p>
</div>
<div id="container">
<div id="nav">
<h2>Nav Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
<div id="outerWrap">
<div id="innerWrap">
<div id="contentWrap">
<div id="content">
<h2>Content Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
</div>
<div id="side">
<h2>Side Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
</div>
</div>
<div id="clear"></div>
</div>
<div id="footer">
<p>footer footer footer footer footer footer footer footer</p>
</div>
</body>
</html>CSS：
body{
font: 13px/1.5 Arial;
margin: 0;
padding: 0;
}
#header, #container, #footer{
width: 85%;
margin: 10px auto;
min-width: 800px;
}
#header{
border: 1px solid black;
background-color: #666;
}
#nav{
border: 1px solid black;
background-color: #999;
width: 200px;
float: left;
}
#outerWrap{
width: 100%;
margin-right: -210px;
float: right;
}
#innerWrap{
margin-right: 210px;
}
#contentWrap{
width: 100%;
margin-left: -110px;
float: left;
}
#content{
border: 1px solid black;
background-color: #999;
margin-left: 110px;
}
#side{
border: 1px solid black;
background-color: #999;
width: 100px;
float: right;
}
#clear{
clear: both;
}
#footer{
border: 1px solid black;
background-color: #CCC;
}1-3-1 中列和側列寬固定
nav 和 content 固定寬度，side 外層加上 sideWrap ，相當於1-2-1單列變寬
HTML 結構：
<!DOCTYPE HTML>
<html>
<head>
<title>1-3-1 中列和側列寬固定</title>
<meta charset="utf-8" />
</head>
<body>
<div id="header">
<p>Header</p>
</div>
<div id="container">
<div id="nav">
<h2>Nav Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
<div id="content">
<h2>Content Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
<div id="sideWrap">
<div id="side">
<h2>Side Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
</div>
<div id="clear"></div>
</div>
<div id="footer">
<p>footer footer footer footer footer footer footer footer</p>
</div>
</body>
</html>
CSS：
body{
font: 13px/1.5 Arial;
margin: 0;
padding: 0;
}
#header, #container, #footer{
width: 85%;
margin: 10px auto;
min-width: 800px;
}
#header{
border: 1px solid black;
background-color: #666;
}
#nav{
border: 1px solid black;
background-color: #999;
width: 200px;
float: left;
}
#content{
border: 1px solid black;
background-color: #999;
margin-left: 10px;
width: 400px;
float: left;
}
#sideWrap{
width: 100%;
margin-right: -620px;
float: right;
}
#side{
border: 1px solid black;
background-color: #999;
margin-right: 620px;
}
#clear{
clear: both;
}
#footer{
border: 1px solid black;
background-color: #CCC;
}