Adaptive width of columns in the three-column layout

For the adaptive width of a DIV, the online saying basically is that the DIV with the adaptive width is placed at the end of other fixed widths, and its float attribute is not specified or its float attribute is specified as none, for example, if the center column of the three-column layout is adaptive width, you can define the three-column Div as follows:

<Div id = "Left" style = "float: Left; width: 100px;"> This is the left column </div> <Div id = "right" style = "float: right; width: 100px; "> This is the right column </div> <Div id =" center "style =" float: none; width: auto; "> This is the middle column, and adaptive width </div>

The effect is as follows:

However, if we add text content in the middle column and add the border and background color for it, we will find the problem:

<Div id = "Left" style = "float: Left; width: 100px;"> This is the left column </div> <Div id = "right" style = "float: right; width: 100px; "> This is the right column </div> <Div id =" center "style =" float: none; width: auto; Border: 1px solid #999999; "> This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. </Div>

The result is as follows:

We can see that only the content in the left and right columns in the middle column is adaptive to the width. Beyond the height of the left and right columns, It is not controlled, and its actual width is still 100%, this can be seen from the background and border.

However, since the two columns can be moved to the left and right sides of the column, there is another solution, that is, to specify the left and right margins of the column, I think that the two sides leave a position, and the content does not have to worry that it will be out of control due to the height of the left and right columns.

The Code is as follows:

<Div id = "Left" style = "float: Left; width: 100px;"> This is the left column </div> <Div id = "right" style = "float: right; width: 100px; "> This is the right column </div> <Div id =" center "style =" float: none; width: auto; margin: 0 100px; Border: 1px solid #999999; "> This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. </Div>

As follows:

You can also use padding (padding) to achieve the same effect, but you need to add a child DIV in the middle column to specify the border and background for it. The Code is as follows:

<Div id = "Left" style = "float: Left; width: 100px;"> This is the left column </div> <Div id = "right" style = "float: right; width: 100px; "> This is the right column </div> <Div id =" center "style =" float: none; width: auto; padding: 0 100px; "> <Div id =" inner "style =" border: 1px solid #999999; "> This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. This is the middle column and the adaptive width. </Div>

The effect is as follows: