CSS common layout arrangement (2)_html/css_WEB-ITnose

1-2-1 single column variable width layout

The side column has a fixed width of 300px, the content column becomes wider, and the size is 100%-300px. The core problem is that the width of the floating column should be equal to "100% - 300px", and CSS obviously does not support this width expression method with subtraction operation. But this width can be achieved flexibly through margin. The principle of implementation is to put a div outside the content, which is the contentWrap in the picture, so that its width is 100%, which is equal to the width of the container. Then by setting its margin-left to -300px, you move it 300px to the left. Then set the margin-left of the content to positive 300px to achieve the originally inexpressible width of "100% - 300px". At this time, the content is inside the contentWrap and exists in the form of a standard flow. After setting its left margin to 300px, you can ensure that the content inside will not overflow outside the layout. Use floating layout: contentWrap floats left and side floats right. The biggest advantage of this method is that there is no need to consider the height of each column. By setting the clear: both attribute of the footer, you can ensure that no overlap occurs.

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 column variable width layout
Similar to the above method, just need Put a div outside the two widened columns, and the width of this div will become wider. It forms a single-column fixed "1-2-1" layout with the fixed-width column next to it, and then it is easy to implement the two variable-width columns in the variable-width column side by side in proportion. For the contentWrap container in the above example, if there is only one div active column inside, like the "1-2-1" layout above, this active column is placed in a standard flow manner, and its width is naturally formed, so the display effect is There is no problem, but when there are two floating active columns in the contentWrap container, the widths need to be set separately, such as 40% and 60% respectively (in order to avoid rounding errors, 59.9% is set here). It is important to note that the width of the contentWrap column is equal to the width of the container, so the 40% here is not 40% of the total width minus the width of the side, but 40% of the total width, which is obviously not what we want. The solution is to put another div inside the container, that is, the original contentWrap becomes two layers, namely outerWrap and innerWrap. The newly added innerWrap exists in the standard flow mode, and the width will naturally stretch. Since the left margin of 200px is set, its width is the total width minus 200px. In this way, the navi and content in the innerWrap will be based on this The new width is the width base.

#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 Fixed-width layout of columns on both sides

Fixed-width columns on both sides, and the middle becomes wider. First, consider the left and middle columns as a group, as an active column, and the right column as a fixed column. Then treat the two columns as independent columns, the left column as a fixed column, and finally keep the content as a variable-width column. When using this method, additional auxiliary divs need to be added for each active column. The idea here is that in the inner layer, in order to fix the navi and make the content wider, an "innerWrap" div is placed outside the two; in order to make the content wider in innerWrap, a contentWrap div is placed outside the content. ;Similarly, in order to make the innerWrap wider, an outerWrap is added to it, which makes the structure complicated. 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;}

OK.