CSS three ways to implement two-column layouts (code)

This article brings the content is about the CSS implementation of the two columns of the layout of the three methods introduced (code), there is a certain reference value, the need for friends can refer to, I hope to help you.

1. Floating layout

The left column fixed width floats to the left, while the main content of the right side uses Margin-left to leave the width of the left column, the default width is auto, and automatically fills the remaining width.

<div class= "One" ></div> <div class= "one" ></div>

        . one{            Float:left;            width:200px;            height:200px;            Background:darkcyan        }        . two{            margin-left:200px;            height:200px;            Background:salmon        }

The right fixed width, the left adaptive is the same, as long as the fixed bar floating right, use margin-right empty its width.

    <div class= "One" ></div>    <div class= "one" ></div>

        . one{            Float:right;            width:200px;            height:200px;            Background:darkcyan        }        . two{            margin-right:200px;            height:200px;            Background:salmon        }

2. Floating layout + negative margin (two-column version of double-wing layout)

        <div class= "Aside" ></div>    <div class= "main" >        <div class= "content" ></div>    </div>

        . aside{            width:300px;            height:100px;            Background:darkcyan;            Margin-right: -100%;            Float:left;        }        . main{            width:100%;            Float:left;        }        . content{            margin-left:300px;            Background:salmon;        }

3. Absolute positioning

    <div class= "left" ></div>    <div class= "right" ></div>

        . left{            width:200px;            height:200px;            Position:absolute;            Background:darkcyan        }        . right{            height:200px;            margin-left:200px;             Background:salmon;        }