CSS layout Summary-change the width of the layout

Change the width of the layout. the ratio is 1-2-1.


Set width: 85% for the total width; min-width: pixel PX for the IE 6; (for the min-width supported, available) Set width: 66% for the content; float: left; side set width: 33%; float: right; add clear empty div
HTML structure:

<! Doctype html> CSS:
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 single column widening



Side is fixed width. content varies with the window width. side is set to width: 200px; float: left; contentWrap is added to the outer content, and contentWrap is set to width: 100%; margin-right:-220px; float: right, and content is set to margin-right: 220px. In this way, wrap is used to realize the width of content to 100%-320px.

HTML structure:
<! Doctype 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 fixed width of one column







Nav fixed width: 200px; float: left; add two layers of div: outerWrap and innerWrap outerWrap to the outer layer of content and side to Set width: 100%; margin-right:-210px; float: right; innerWrap is set to margin-right: 210px; then the content and side are equal to the width of the innerWrap.

HTML structure:
<! Doctype 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 fixed center column width



The content width is fixed in nav and side with the outer div: navWrap and sideWrapnavWrap respectively set to width: 50%; margin-left:-210px; float: left; nav is set to margin-left: 210px; similarly, sideWrap and side also make similar settings

HTML structure:
<! Doctype 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 double-side column width fixed



Fixed nav and side width: nav is set to width: 200px; float: left; outerWrap and innerWrap are added to the outer layer of content and side, which is equivalent to setting the fixed width of a single column, adding contentWrap to the outer content of nav is also equivalent to setting the fixed width of a single column inside innerWrap and setting the fixed width of side.

HTML structure:
<! Doctype 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;}

Fixed column and side column width in 1-3-1

The width of nav and content is fixed. The outer side is added with sideWrap, which is equivalent to the width variation of a single column ranging from 1 to 2-1.

HTML structure:
<! Doctype 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;}