I am familiar with the three kinds of three-column Web page width Adaptive Layout method

First, preface
It is a good choice to use a mobile layout (also known as an adaptive layout) for every resolution display N-foot period. Of course, the concrete implementation is not so easy, need certain CSS skill and practical experience. This article does not talk about the details, only the external adaptive architecture, which is to achieve the entire page adaptive premise. So far, I have known the three columns of the left and right column width adaptive to the browser has three methods: absolute positioning method, margin negative value method and self-floating method. These methods are simple and practical, and there is no compatibility problem. If you want to use the liquidity layout on your page, I believe this article gives you some inspiration.

Two or three different methods
In order to demonstrate the need, first of all, the layout structure of the following example: Left and right three columns of the layout, two columns fixed width (to change the width of the value to the hundred points can be fixed), the middle column width adaptive. The left and right two columns are 200 pixels wide.

1. Absolute Positioning method
This is perhaps the most intuitive in three ways, the most easy to understand: the left and right two columns with absolute positioning, respectively, fixed on the left and opposite sides of the page, the middle of the main bar with the margin value to open the distance. So the three-column adaptive layout is realized.

You can really click here: Absolute Positioning Method Demo Demo

The CSS code is as follows (for):

The HTML code is (picture):

Here, the left and right three div order can be arbitrarily adjusted, which is not the same as the remaining two methods, you need to pay attention to.

The advantage of this method is that it is easier to understand, easy to start, and less likely to break the layout by internal elements, which is more likely to withstand toss.
The downside is that if the middle column has a minimum width limit, or an inner element with a width, a layer overlap occurs when the browser width is small to a certain extent. However, in general, unless the user display resolution width >=1600 pixels, the user will not reduce the browser to less than 1000 pixels, so the defect Hazard index 3.

2, margin negative method
This method is used in the actual site of the most, I personally feel how much some of the suspicion of the follow-up. This method is difficult to summarize in a sentence. First, the middle body uses a double label. The outer div width 100% is displayed, and floats (this example left floating, which is based on the following sequence), the inner Div is the true main content, and contains the margin value of the left and right 210 pixels. The left column and the right column are all using margin negative position, left column left floating, Margin-left is-100%, because the front div width 100% and browser, so here the -100%margin value just make left column div to the left side of the page, the right column is also left floating, Its margin-left is also negative, and the size is its own width, which is 200 pixels.

See the following CSS code:

HTML code:

You can really click here: Margin Negative Method Demo Demo

You need to pay attention to the order of several div, whether it is left floating or right floating, first the main part of the Div, which is certain, as for the right and left two columns who first who, it doesn't matter, I tested the Ie6,firefox, as well as the Chrome browser, performance consistent.

The advantages of this method: The three columns are interrelated, the real sense of self-adaptation, there is a certain resistance-the layout is not easy to be affected by the internal.
The disadvantage is: relatively difficult to understand some, to get started is not easy, the code is relatively complex. The percent width appears, too many negative values are positioned, and if a layout bug occurs, troubleshooting is not easy.

3. Self-floating method
This method code is the simplest. The characteristics of label float following are applied. Left column left floating, right column right floating, the main body directly behind, realized the self-adaptation.

You can simply click here: Self-Floating Method demo Demo

The CSS code is as follows:

HTML code:

Here the key to the order of three div tags is to put the main div in the final, left and right two columns of div order arbitrarily.

The advantage of this approach is that the code is concise and efficient
The disadvantage lies in: the middle body exists nemesis, Clear:both attribute. If you want to use this method, you need to avoid the obvious clear style.

Third, download
You can simply click here: Demo package download (Zip)

Iv. Conclusion
Table tables are a powerful tool for adaptive layouts, and now Google's product page, Yahoo, and other adaptive pages are still using table technology because of the adaptive capabilities of the table itself. However, although it is Google, it is Yahoo, but I still despise, you can try Firebug to see the Google page HTML code, unbelievable! The level is amazing, the code is really much, bloated! I used to think that it might be necessary for some functions, and now it is found that the pursuit of technology, extensible, adaptive by-product. I have practiced many times, and I can say with great certainty that div can completely replace table for adaptive layout.

This article provides only a few self-adaptive methods that I personally know, in fact, I believe, there must be other methods, which requires you I think about it and find out.
Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
This address: http://www.zhangxinxu.com/wordpress/?p=370

I am familiar with the three kinds of three-column Web page width Adaptive Layout method