Variable width layout
Total width setting width: 85%; min-width: 650px; (about IE6’s min-width support, available)
content settings width: 66%; float: left;
side settings width: 33%; float: right;
Add clear empty div
HTML structure:
<!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; }
side fixed width, content changes with window width
side settings width: 200px; float: left;
Add contentWrap to the outer layer of content, and set contentWrap to width: 100%; margin-right: -220px; float: right;
The content is set to margin-right: 220px;
This uses wrap to achieve a content width of 100%-320px
HTML structure:
<!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>
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; }
nav fixed width width: 200px; float: left;
in the outer layer of content and side Add two layers of divs: outerWrap and innerWrap
outerWrap is set to width: 100%; margin-right: -210px; float: right;
innerWrap is set to margin-right: 210px;
Then content and side are equivalent to proportionally widening inside innerWrap
HTML structure:
<!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>
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; }
content width fixed
Add outer divs to nav and side respectively: navWrap and sideWrap
navWrap is set to width: 50%; margin-left: -210px; float: left;
nav settings For margin-left: 210px;
Similarly, sideWrap and side also have similar settings
HTML structure:
<!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>
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; }
The nav and side widths are fixed
The nav is set to width: 200px; float: left;
Add outerWrap and innerWrap to the outer layer of content and side, which is equivalent to a single column with a fixed width. Setting, nav fixed width
Then add contentWrap on the outer layer of content, which is equivalent to setting a single column fixed width inside innerWrap, side fixed width
HTML structure:
<!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>
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; }
nav and content have fixed width, and side outer layer plus sideWrap is equivalent to 1-2-1 single column widening
HTML structure:
<!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>
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; }