Css implements two-column layout, one fixed width, one adaptive width, and two css columns.

Css implements two-column layout, one fixed width, one adaptive width, and two css columns.

Whether it is left or right, the width of one side is fixed, and the width of one side is adaptive.

Many topics in the blog Park are also designed in this way. My blog also has a fixed width on the right side and an adaptive screen layout on the left side.

Html code:

<Div id = "wrap"> <div id = "sidebar" style = "height: 500px; background: red; color: # fff; "> fixed width </div> <div id =" content "style =" height: 500px; background: #000; color: # fff; "> adaptive area </div>

There are several implementation methods:

1. fixed width area floating, adaptive area without width and set margin

The following uses the fixed width on the right side and adaptive width on the left side as an example:

Css code:

#sidebar {  float: right; width: 300px;}#content {  margin-right: 300px;}

Implementation:

The right side remains unchanged, and the left side adapts to the remaining size of the screen.

But in fact, this method has limitations, that is, in the html StructureThe sidebar must be earlier than the content.!

But I need sidebar after content! Because my content is the main content of the webpage, I don't want the main content to be placed behind the secondary content instead.

The first method described above is invalid.

The following method is required.

2. Use float with margin

First, adjust the html structure:

<Div id = "wrap"> <div id = "content" style = "height: 500px; background: #000; color: # fff; "> <div class =" contentInner "> adaptive area </div> <div id =" sidebar "style =" height: 500px; background: red; color: # fff; "> fixed width area </div>

Css code:

#content {  margin-left: -300px; float: left; width: 100%;}#content .contentInner{  margin-left:300px;}#sidebar {  float: right; width: 300px;}

In this way, the actual width of contentInner is-300px.

3. Use absolute positioning for fixed-width areas, and set margin for adaptive areas.

Html structure:

<Div id = "wrap"> <div id = "content" style = "height: 500px; background: #000; color: # fff; "> my current structure is in front </div> <div id =" sidebar "style =" height: 500px; background: red; color: # fff; "> fixed width area </div>

Css code:

#wrap{  position:relative;}#content {  margin-right:300px;}#sidebar {  position:absolute;  width:300px;  right:0;  top:0;}

4. Use display: table to implement

Html structure:

<Div id = "wrap"> <div id = "content" style = "height: 500px; background: #000; color: # fff; "> my current structure is in front </div> <div id =" sidebar "style =" height: 500px; background: red; color: # fff; "> fixed width area </div>

Css code:

#wrap{  display:table;  width:100%;}#content {  display:table-cell;}#sidebar { width:300px;  display:table-cell;}

Of course, the last method is incompatible with IE7 and the following browsers, because IE7 does not recognize display as a table.