CSS Layout Summary-variable width layout

Variable width layout 1-2-1 proportional widening


Total width set width:85%; min-width:650px; (For IE6 min-width support, available) content settings width:66%; Float:left;side setting 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 Row widening

Side fixed width, content varies with form width side set width:200px; Float:left; add Contentwrap,contentwrap set to width:100% in content outer layer; Margin-right: -220px; Float:right, while the content is set to margin-right:220px, this makes use of wrap to achieve a content width of 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 single-side column width fixed



Nav fixed width width:200px; Float:left; add two layers div:outerwrap and innerwrap outerwrap to width:100% in content and side outer layers; Margin-right: -210px; The Float:right;innerwrap is set to margin-right:210px, and the content and side are equal to the width of the innerwrap interior.
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 middle Column width fixed

Content width fixed in nav and side respectively plus outer div:navwrap and sidewrapnavwrap set to width:50%; Margin-left: -210px; Float:left;nav is set to margin-left:210px, so sidewrap and side do 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 row width fixed

Nav and side width fixed nav set to width:200px; Float:left; add Outerwrap and Innerwrap to the content and side, which is equivalent to the fixed-width setting of a single column, nav fixed width and then add contentwrap to the content layer, also equivalent to Inne Rwrap internal single row fixed width setting, side fixed width
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;}

1-3-1 column and side widths fixed
Nav and content fixed width, side outer plus sidewrap, equivalent to 1-2-1 single row widening
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;}