A summary of how CSS two column layouts are shared

This article mainly introduces the CSS two column layout implementation of the summary, discussed including absolute + margin and float + margin mode of some practice and problems, the need for friends can refer to the following

The two-column layout is probably the most classic form of Web page layout, this blog is the use of this layout. In two-column layouts, it is most common to have a primary column (main) that is an adaptive width, and the Child column (sidebar) is a fixed-width case.
Take a look at how to achieve this fixed width + adaptive two-column layout.

1. Absolute + margin mode

The first thing to think about is the use of absolute + margin way to achieve. First look at the code:

<p class= "Container" >    <p class= "sidebar" > Child columns </p>    <p class= "main" > main column </p></ P>

. container {    position:relative;   }   . sidebar {    position:absolute;    top:0;    left:0;    width:200px;    height:300px;    Background-color:rgba (255, 0, 0,. 5);   Main {    height:300px;    margin-left:210px;    Background-color:rgba (0, 255, 0,. 5);   

This method uses position to leave the sidebar column out of the document flow, and then removes the portion covered by the sidebar column through the margin-left of the main column. In this way, we achieve a fixed width + adaptive two-column layout.

(1) Column order adjustment

In the case of not modifying HTML, simply modify the CSS, we can let the left and right two columns in the order of exchange, to see the code:

. sidebar {    position:absolute;    top:0;    rightright:0;   }   . Main {    margin-right:210px;   }

(2) Main Content column priority display

Let's consider a more perfect, can you put the main column in front of the sidebar column, so that the primary content first load rendering? Let us try!

<p class= "Container" >    <p class= "main" > main column </p> <p class= "sidebar" > Child columns </p></p>

Do the simple adjustment above, CSS does not need any changes!

(3) Where the problem lies

Although there are many advantages to this approach, there is a fatal disadvantage. Because the sidebar column is out of the document flow, the sidebar column overrides the following layout when it is sizing the main: problem demo.
If you add Overflow:hidden to the container container, the sidebar overflow portion is trimmed. In this way, the problem does not have an effective solution.

2. Float + margin Mode

Then think of the float + margin to achieve the two-column layout, the first to achieve the left column width, the main content adaptive two-column layout. The code is as follows:

<p class= "sidebar" > Sub-column </p><p class= "main" > main column </p>

. sidebar {    float:left;    width:200px;    height:300px;    Background-color:rgba (255, 0, 0,. 5);   Main {    height:300px;    margin-left:210px;    Background-color:rgba (0, 255, 0,. 5);   

This implementation is relatively simple, first floating the column to the left, and then set Margin-left on the main column to leave the display space for the child column.

So, does this approach support the position of the swap column? Of course. The CSS code is as follows:

. sidebar {    float:rightright;    width:200px;    height:300px;    Background-color:rgba (255, 0, 0,. 5);   Main {    height:300px;    margin-right:210px;    Background-color:rgba (0, 255, 0,. 5);   

The problem lies in:

It looks like the float + margin approach is a good idea, but the main column we mentioned earlier in the pre-prioritized optimization is not implemented.

3. Float + negative margin mode

Nonsense not much to say, directly on the code:

<p class= "Main-wrapper" >    <p class= "main" > main column </p></p><p class= "sidebar" > Child columns </p >

. main-wrapper {    float:left;    width:100%;   }   . Main {    height:100px;    margin-left:210px;    Background-color:rgba (255, 0, 0,. 5);   sidebar {    float:left;    width:200px;    height:100px;    Margin-left: -100%;    Background-color:rgba (0, 255, 0,. 5);   

Everyone should have seen it, this is the dual-wing layout, the main column priority display. The implementation process is as follows:

First float the main column and the sidebar column, and then correctly position the sidebar column with a negative margin.
The main column is nested in a p, and the width value of the p is set to 100%.
Finally, by setting the Margin-left of the main column, remove the part that is covered by the sidebar.