CSS webpage layout tutorial 8: Adaptive width of floating middle columns in three columns

Using the floating Positioning method, fixed width and adaptability from one column to multiple columns are basically simple, including fixed width of three columns. Here, we have a new requirement. We hope to have a three-column layout. The left column in the base must be fixed in width and displayed on the left, the right column requires a fixed width and right display, while the middle column needs to be in the middle of the left and right columns, automatically adapt to the change according to the spacing between the left and right columns. This puts forward a new requirement for layout, and the use of Float attributes and percentage attributes alone cannot be achieved, currently, CSS does not support percentage calculation as accurate as the placeholder value in the left and right columns. If the width of the middle column is 100%, it uses the width of the browser window, instead of the middle distance between the left and right columns, we need to rethink this issue.

Absolute Positioning
Before starting such a three-column layout, it is necessary to understand a new positioning method-absolute positioning. The above floating Positioning method is mainly implemented by the browser based on the object content to automatically adjust the floating direction, but this method cannot meet the positioning requirements, it needs a new method to achieve, in addition to floating positioning, CSS provides absolute positioning. Absolute positioning is implemented using the position attribute.

Position is used to set the positioning method of an object. Available values: static, absolute, and relative.

For each object on the page, the default position attribute is static.
If you set the object to position: absolute, the object will be relocated based on the location of the entire page. When using this attribute, you can use top, right, bottom, left is the distance value in the upper left and lower left directions to determine the specific position of the object. See the following CSS:

# Layout {
Position: absolute;
Top: 20px;
Left: 0px;
}
If # layout uses position: absolute;, it will change to absolute positioning mode. At the same time, when Top: 20px; is set, it will always be 20 PX above the browser window, and left: 0px; make sure it is 0 PX away from the left of the browser.

Note: If a position: absolute is set for an object, it is essentially separated from other objects, and its location mode does not affect other objects, it will not be affected by the floating positioning of other objects. In a sense, after the absolute positioning is used, the object floats on the webpage like a layer.

After the object is absolutely located, the floating relationship between the object and the page will not be considered. You only need to set the top, right, bottom, and left values of the object.

In this example, the use of absolute positioning can effectively solve the problems we have raised. Similarly, we use three divs to form our three column structure:CopyCodeThe Code is as follows:

# Left {
Background-color: # e8f5fe;
Border: 1px solid # a9c9e2;
Height: 400px;
Width: 200px;
Position: absolute;
Top: 0px;
Left: 0px;
}
# Right {
Background-color: # ffe7f4;
Border: 1px solid # f9b3d5;
Height: 400px;
Width: 200px;
Position: absolute;
Top: 0px;
Right: 0px;
}

In this way, the left column is displayed from left: 0px to the left edge, and the right column is displayed from right: 0px to the right, the # center in the middle uses a common CSS style:

Copy code The Code is as follows: # center {
Background-color: # f2fddb;
Border: 1px solid # a5cf3d;
Height: 400px;
Margin-Right: 202px;
Margin-left: 202px;
}

For the # center, we do not need to set its floating mode. We only need to keep it with the left margin # The width of Lef and # Right forever, the adaptive width of 202px is obtained for each side, while the distance between the left and right is displayed in the space.Xmlns = "http://www.w3.org/1999/xhtml">

Column in the left column -- aa25.cn right column