CSS: Two-column layout, three-column layout

Two column layout

Adaptive Layout

Left fixed sidebar, right adaptive

Method 1: Floating layout

<div id = "aside">
</div>
<div id = "main">
</div>

div{
  height:500px;
}
#aside{
  width:300px;
  background-color:yellow;
  float:left;
}
#main{
  background-color:aqua;
  margin-left:300px;
}

The left column has a fixed width floating to the left, while the right main content uses margin-left to leave the width of the left column. The default width is auto, which fills the remaining width automatically.

Fixed width on the right and adaptive on the left are the same. Just float the fixed column to the right and use margin-right to empty its width.

#aside{
  width:300px;
  background-color:yellow;
  float:right;
}
#main{
  background-color:aqua;
  margin-right:300px;
}

Method 2: Floating Layout + Negative Outside Margin
This method is a good way to create a simple two-column layout with fixed width and 100% width of a column:

<div id = "aside">
</div>
<div id = "main">
  <div id = "content"></div>
</div>

div{
  height:500px;
}
#aside{
  width:300px;
  background-color:yellow;
  float:left;
  margin-right:-100%;
}
#main{
  width:100%;
  float:left;
}
#content{
  margin-left:300px;
  background-color:aqua;
}

The left fixed bar specifies a 100% negative outer margin on the right for the width of the entire screen, which allows the leftmost side of main to align with the leftmost side of the screen.
At this point, the width of main is 100%, so you need to specify a left margin for its sub-content content content to empty the position of the left column, that is, the width of the left column 300 px.

This method is relatively complex, but it is also very common.

Fixed width

If both columns are fixed width, they float left.

#aside{
  width:300px;
  background-color:yellow;
  float:left;
}
#main{
  width:600px;
  background-color:aqua;
  float:left;
}

If you want to change the left and right positions of the two, you can change the html elements of the two before and after.

Three column layout

Method 1: Absolute positioning
The left column and the right column are fixed on the left and right side with absolute positioning respectively, while the middle column uses margin-left and margin-right to empty the left and right column positions.

<div id = "left">
</div>
<div id = "main">
</div>
<div id = "right">
</div>

html,body{
  margin:0;
  padding:0;
  height:100%;
}
div{
  height:100%;
}
#left{
  width:200px;
  background-color:yellow;
  position:absolute;
  top:0;
  left:0;
}
#main{
  background-color:aqua;
  margin-left:200px;
  margin-right:300px;
}
#right{
  width:300px;
  background-color:orange;
  position:absolute;
  top:0;
  right:0;
}

The positions of the three div s here can be adjusted at will.

Method 2: Floating + Negative Outside Margin
It is similar to the method 2 in the layout of the two columns, that is, the use of middle-100% outer margin. Pay attention to understanding.

The left float is used in all three columns.
The div in the middle column is written at the front with a width of 100%.
The left sidebar is also left floating. By default, the left sidebar is one line below the middle column because the div in front occupies 100%. Set margin-left:-100% for the left column, that is, 100% of the width of the entire screen, which makes the left column run to the left of the middle column.
The right sidebar is also left-floating, and by default it is in the bottom row of the middle column. Also, margin-left:-300px, which is its own width, is used to move it to the right-most position of the previous row.
The content part of the middle column needs to make use of the outer margins equal to the width of the left and right sidebars to empty their positions.

<!--The middle column is at the front.-->
<div id = "main">
  <div id="content"></div>
</div>
<div id = "left">
</div>

<div id = "right">
</div>

html,body{
  margin:0;
  padding:0;
  height:100%;
}
div{
  height:100%;
}


#main{
  background-color:aqua;
  width:100%;
  float:left;
}
#left{
  width:200px;
  background-color:yellow;
  float:left;
  margin-left:-100%;
}

#right{
  width:300px;
  background-color:orange;
  float:left;
  margin-left:-300px;
}

#content{
  margin-left:200px;
  margin-right:300px;
}

On-line DEMO

Method 3: Floating location method
This method is the simplest. The left and right columns float to the left and right respectively. The middle column is placed at the end, and the left and right outer margins are used to empty the position of the left and right columns.

<! - The position of the left and right sidebars can be changed - >
<div id="left"></div>
<div id="right"></div>
<! - Put the middle bar at the end - >
<div id="main"></div>

*{
  margin:0;
  padding:0;
  height:100%;
}
#left{
  width:300px;
  background-color:yellow;
  float:left;
}
#right{
  width:200px;
  background-color:orange;
  float:right;
}
#main{
  background-color:aqua;
  margin-left:300px;
  margin-right:200px;
}