CSS layout-adaptive width

Css is hard to say and easy to say. In my opinion, the most important thing is the accumulation of experience. What we call this is that we do not accumulate silicon steps, and there are thousands of miles. This series of articles describe the implementation of several special css la S, and should also be a memo for yourself.

First, we will talk about the layout of three columns. The width of the left and right columns is fixed, and the width of the middle column is adaptive.

This is a good implementation. The left and right columns are left-floating and right-floating respectively, and a fixed width is given. The center is not floating, and the width is not set. In this way, you can. However, to be compatible with IE, you must do some work.

Take a look at the code structure:

Effect:

Do you want to set margin-left and margin-right in the middle column?

Note: In the middle column, you need to set the left and right margins to the width of the left and right columns, otherwise there will be some problems. As follows:

In standard browsers such as Google and Firefox, this is the case (including IE8 + ):

In IE6 and IE7 (the figure is captured under IE6)

We can see that the starting points of the sub-element margin-left or margin-right in the middle column are inconsistent. in IE6 and IE7, even if you do not set margin-left and margin-right for the middle column, the start point of the left and right margins of its child elements is based on the width of the left and right columns, it is like having margin-left and margin-right. Therefore, to ensure the consistency of browsers, it is better to set a margin-left and margin-right in the middle column.

3px gap bug in IE6

In ie6, we can see that there is a 3px interval between columns, which is only a problem with IE6.

If the margin-left and margin-right values in the middle column are both 0, you only need to set the margin-right Value in the left column to-3px, set the right-column margin-left to-3px.

But if we set the margin-left and margin-right of the middle column to the width of the left and right columns respectively (as mentioned above, this is also required ), even if the left column's margin-right is set to-3px, the right column's margin-left is set to-3px. In this case, we have to set the margin-left of the middle column to the width of the left column-3px, And the margin-right to the width of the right column-3px. As follows:

Final code

<! DOCTYPE html> 


The layout of two columns is fixed in width, and the adaptive layout of the other column is also true.