How to implement a two-column layout with left fixed width and right-hand adaptation via CSS

Recently in the Baidu IFE training camp to see a topic:

Two different ways to achieve a two-column layout, where the left part width fixed, the right part width with the browser width changes and adaptive changes

Individual summed up the following three ways to realize:

1. Achieve with absolute positioning

See the Pen Absolute-two-column by xal821792703 (@honoka) on Codepen.

Note the following points:

• • Need to set a parent element of "positioned"
  • Div-a absolute positioning and adjusts the position to the upper left corner of the browser
  • Div-b Margin-left Property value is div-a width (because the div-a absolute positioning is out of the document flow, it is not set to div-a width, it will cover each other)
  • Div-c absolutely position and adjust the position to just below
  • The div that needs to be adapted is set to a width of 100%

2. By floating implementation

See the Pen Float-two-column by xal821792703 (@honoka) on Codepen.

Note the following points:

• • Div-a set to left float
  • Div-b as above needs to set the Margin-left property value to the width of div-a, as above, the float will also be out of the document flow
  • Div-c best to clear the float, avoid the effects of floating

3. Implementation through BFC rules

See the Pen Bfc-two-column by xal821792703 (@honoka) on Codepen.

Here you will not spend a lot of time introducing BFC, as you can see in the two blog posts below:

Deep understanding of BFC and margin Collapse

CSS BFC Detailed

In short, BFC can help us solve the problem that the left margin of the right element touches the left outer border of the block container when the left element of the layout is out of the document flow, as in:

Now we just need to pay attention to setting Div-b to BFC element.

The above is a personal summary of the three two-column layout method, welcome to communicate.

In addition if the Baidu IFE front-end training camp interested, welcome to my repo look (laughter)

How to implement a two-column layout with left fixed width and right-hand adaptation via CSS