How to implement two-column layout with css

This article mainly introduces how to use css to achieve two-column layout, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Two-column layout

The classical two-column layout consists of left and right columns, which is characterized by the fixed width of one column, the adaptive width of the other column and the fixed and equal height of the two columns. The following examples are fixed width of left column and adaptive width of right column, and vice versa.

Float + margin-left/right

The left column declares float:left and fixed width, and since float makes the node out of flow, the right column needs to declare margin-left as the width of the left column to ensure that the two columns do not overlap.

.two-column-layout {width: 400px; height: 400px; .left {float: left; width: 100px; height: 100%; background-color: # f66;} .right {margin-left: 100px; height: 100%; background-color: # 66f;}

Overflow + float

The left column declares the same as above, and the right column declares that overflow:hidden forms a BFC area that is isolated from the outside world.

.two-column-layout {width: 400px; height: 400px; .left {float: left; width: 100px; height: 100%; background-color: # f66;} .right {overflow: hidden; height: 100%; background-color: # 66f;}}

Flex

It is more concise to implement using flex. The left column declares a fixed width and the right column declares flex:1 adaptive width.

.two-column-layout {width: 400px; height: 400px; .left {float: left; width: 100px; height: 100%; background-color: # f66;} .right {overflow: hidden; height: 100%; background-color: # 66f }} Thank you for reading this article carefully. I hope the article "how to achieve two-column layout with css" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!