Use DIV CSS for liquid layout (width adaptive)_html/css_WEB-ITnose

To make a long story short, use DIV CSS to make liquid layout (width adaptive), specifically using the "negative outer patch" method (negative margins).
Now let’s make a three-column liquid layout (three-column liquid layout)

First the code of Body and outer frame:

body{margin:0;padding:0px;text-align: center;}
#wrap{margin:0 auto;text-align:left;}

The codes for the three columns are as follows:

/*Left column, fixed width*/
. wrap_l{float:left;background:#FF0000;margin-right:-150px;width:150px;border:1px solid #333;}
/*Middle column, adaptive width*/
.wrap_m{width :auto;background:#00FF00;margin:0 140px 0 150px;border:1px solid #000;}
/*Right column, fixed width*/
.wrap_r{float:right;background:#0000FF; margin-left:-140px;width:140px;border:1px solid #999;}

Here, the frame is completed, the following is the complete code:

This is the left part

This is the left part

This is the left part

This is the right part

This is the right part

This is the right part

This is the middle Part

left of middle

right of middle

This is the middle part