Using CSS to realize three column adaptive layout (width fixed on both sides, adaptive in the middle)


The so-called three column adaptive layout means that the width of the two sides is fixed and the width of the middle block is adaptive. This question was also asked in the interview of Netease’s internal push front-end engineer this year. Here I mainly divide into two categories, one is based on the traditional position implementation, the other is based on the new features of CSS3 elastic box model layout implementation.

1. Layout based on traditional attributes such as position and margin

There are also three methods: absolute positioning, grail layout and self floating.

1) Absolute positioning method

The principle of absolute positioning method is to use absolute positioning to locate the left and right sides, because absolute positioning makes them separate from the document stream, and the later center will flow to them naturally. Then, the margin attribute is used to reserve the width of the left and right elements, so that the middle elements can adapt to the screen width.

The code is as follows:

<!DOCTYPE html>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="../css/layout_box.css">
  <h3>Realize three column width adaptive layout</h3>
  < div id = "left" > I'm on the left < / div >
  < div id = "right" > I'm on the right < / div >
  < div id = "center" > I'm in the middle < / div >

CSS code:

html,body{ margin: 0px;width: 100%; }
h3{height: 100px;margin:20px 0 0;}
#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}
#right{right: 0px;}
#center{margin:2px 210px ;background-color: #eee;height: 200px; }

The advantage of this method is that the order of three divs can be changed arbitrarily. The disadvantage is absolute positioning, so if there are other contents on the page, the top value needs to be handled carefully. It’s better to initialize the CSS style, just like adding a title in the above example. If the style is not initialized, the values on both sides and in the middle will not be aligned. In addition, when the browser window is smaller than 200px, compression will occur.
The result is as shown in the figure. You can see that the width of the middle bar expands and shrinks with the screen size.

2) Use self floating method

The principle of self floating method is to use right and left separately float:left and float:right , float makes the left and right elements separate from the document flow, and the middle element is normally in the normal document flow. Use margin to specify the left and right outer margins to locate them.

HTML code:

<h3>Positioning by self floating method</h3>
<div id = "left_ Self "> I'm on the left < / div >
<div id = "right_ Self "> I'm on the right < / div >
<div id = "center_ Self "> I'm in the middle

CSS code:

#left_self,#right_self{ width: 200px;height: 200px; background-color: #ffe6b8 }
#left_self {float: left;}
#right_self{float: right;}
#center_self{margin: 0 210px;height: 200px; background-color: #a0b3d6}

The advantage of this layout method is that it is less affected by the outside world, but the disadvantage is the order of the three elements. The center must be placed last, which is different from the absolute positioning. The center occupies the position of the document stream, so it must be placed last. There is no relationship between the left and right elements. When the browser window is small, the element on the right is knocked down to the next line.

3) . grail layout

The principle of the Grail layout is the negative margin method. To use the Holy Grail layout, first of all, you need to include a div outside the center element. If you include the div, you need to set the float attribute to form a BFC, and set the width, which should be matched with the negative margin value of the left block. Please refer to here for the specific principle. The Grail layout is explained in detail here.

Implementation code:

<h3>Using margin negative value method for layout</h3>
  <div id = "wrap">
   <div id = "center"></div>
  <div id = "left_margin"></div>
  <div id = "right_margin"></div>

CSS code:

#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}
#wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }
#left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }
#left_margin {margin-left: -100%; background-color: lightpink}
#right_margin{margin-left: -200px;}

This method is very common in website layout, and it is also a common test site for interview. The advantage is that the three columns are interrelated and have certain resistance. It should be noted that the middle part of the layout must be placed in the front, and there is no restriction on the left and right order. For left fast margin, the negative value must be equal to the width of wrap.
Three methods to realize the adaptive layout of three column web page width are shown in the figure below.

2. New features of CSS3

Wrap a div on the outside, set it to display: Flex; set flex: 1 in the middle; but the box model is next to each other by default, and you can use margin to control the outer margin.


<div id = "box">
		 <div id = "left_box"></div>
		 <div id = "center_box"></div>
		 <div id = "right_box"></div>

CSS Style:

#box{width:100%;display: flex; height: 100px;margin: 10px;}
#left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: lightpink}
#center_box{ flex:1; height: 100px;margin: 10px; background-color: lightgreen}

Note: the center must be placed in the middle.

The effect picture is as follows:

There are many other features of CSS layout. Next, we are going to study the floating, and then study the position, and display attributes.

This article about using CSS to realize three column adaptive layout (fixed width on both sides, adaptive in the middle) is introduced here. For more relevant CSS three column adaptive layout content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!