CSS Common layout arrangement (ii)

1-2-1 single row variable width layout

Side column width 300px,content column width, size is 100%-300px. The core problem is that the width of the floating column should be equal to "100%-300px", while the CSS obviously does not support this method of expressing the width with the subtraction operation. However, this width can be flexibly achieved by margin. The implementation of the principle is, in the content of a div, that is, the figure of Contentwrap, so that its width of 100%, that is, equal to the width of container. Then, by setting its margin-left to -300px, it moves 300px to pan left. Then the content of the Margin-left set to positive 300px, the implementation of the "100%-300px" This can not be expressed in width. At this time, content in the Contentwrap, in the form of a standard flow, will its left margin set to 300px, you can ensure that the contents of the inside will not overflow to the outside of the layout. Use floating layout: Contentwrap left float, side right float. The biggest benefit of this approach is that you don't have to consider the height of each column, and by setting the Clear:both property of the footer, you can guarantee that there will be no overlap.

CSS code:

#header, #footer, #container{margin:0 Auto;width:85%;}#contentWrap{Margin-left:-300px;float: Left;width:100%;}#content{Margin-left:300px;}#side{float: Right;width:300px;}#footer{Clear:both;}

1-3-1 single row variable width layout
Similar to the above, you only need to set a div outside the two widening columns, and the div width is widened. It is easy to implement with a fixed-width column next to a single-column fixed "1-2-1" layout, and then scale the two widening columns of the widening column proportionally. For the Contentwrap container in the example above, if there is only one div activity column inside, as in the "1-2-1" layout above, this activity column is placed in the standard flow mode, and its width is naturally formed, so that the display effect is no problem. When there are two floating active columns in the Contentwrap container, you need to set the widths separately, for example, 40% and 60% (to avoid rounding errors, set 59.9% here). It is important to note that the width of the contentwrap column is equal to the width of container, so the 40% here is not the total width minus the width of the side after 40%, but the total width of 40%, which is obviously not what we want. The solution is to set a div inside the container, that is, the original one contentwrap into two layers, respectively, outerwrap and Innerwrap. The newly added innerwrap is present in the standard flow mode, the width will naturally stretch, because the left margin of 200px is set, so its width is the total width minus 200px, so that The Navi and content in the Innerwrap will be based on the width of this new width.

#header, #footer, #container{margin:0 Auto;width:85%;}#outerWrap{float: Left;width:100%;Margin-left:-200px;}#innerWrap{Margin-left:200px;}#navi{float: Left;width:40%;}#content{float: Right;width:59.5%;}#side{float: Right;width:200px;}#footer{Clear:both;}

1-3-1 side column Fixed width layout

Fixed width on both sides, widening in the middle. consider the left and middle two columns as a group, as an active column, and a column on the right as a fixed column. Then the two columns are treated as separate columns, the left is a fixed column, and the content is the variable width column. When you use this method, you need to add additional auxiliary div for each active column you implement. The idea here is that, in the inner layer, in order to make the Navi fixed, the content becomes wider, a "innerwrap" div is set outside the two, and a contentwrap div is nested outside the content in order to make the content wider in the innerwrap. In the same vein, in order for the Innerwrap to widen and set a outerwrap for it, the structure becomes complex. But the principle is the same.

CSS code:

#header, #footer, #container{margin:0 Auto;width:85%;}#side{width:200px;float: Right;}#outerWrap{width:100%;float: Left;Margin-left:-200px;}#innerWrap{Margin-left:200px;}#navi{width:150px;float: Left;}#contentWrap{width:100%;float: Right;Margin-right:-150px;}#content{Margin-right:150px;}#footer{Clear:both;}

It's OK.

CSS Common layout arrangement (ii)