Two-column Layout implementation method

The two-column layout is implemented in a number of ways, and is now listed according to the different needs of several common

Fixed layout of one or two columns

1, the ordinary floating layout

Two columns of fixed layout, the width of the left and right columns is known, and can be implemented with float

Html:

   <div class= "Wrap Clearfix" >        <div class= "left" >            <p> Fixed width to the side </p>            <p> left fixed width </p>            <p> Left fixed width </p>            <p> left fixed width </p>            <p> left fixed width </p>                    </ div>        <div class= "right" >            <p> RH Fixed width </p>            <p> Right fixed width </p>            <p > Right Fixed width </p>                   </div>    </div>

Css:

. Clearfix:before,.clearfix:after{content: "";d isplay:table;}. Clearfix:after{clear:both;}. Clearfix{*zoom:1;}. wrap{width:1000px;margin:0 auto;background: #eee;} wrap. Left{float:left;width:280px;background: #cf0;}. Wrap. Right {float:right;width:700px;background: #fdc6bb;}

As follows:

　

This layout method is compatible with all browsers, and the parent element needs to write the Clearfix style to clear the float, such as the need to set a fixed height for a high-level layout.

2. Negative margin layout

Nested a div more than the previous layout

Html:

<div class= "Wrap clearfix" ><div class= "Main-wrap" ><div class= "main" ><p> Right fixed width </p> <p> Right Fixed width </p><p> right fixed width </p></div></div><div class= "side" ><p> Left fixed width </p><p> left fixed width </p><p> left fixed width </p><p> left fixed width </p><p> left fixed width < /p></div></div>

Css

. wrap{width:1000px;margin:0 auto;background: #eee;} wrap. Main-wrap{width:100%;float:left;}. Wrap. Main-wrap. Main{margin-left:300px;background: #cf0;}. Wrap. Side{width:280px;float:left;margin-left:-1000px;background: #fdc6bb; _display:inline;zoom:1;}

As with the previous layout, the side Margin-left value is the width of the parent element and is negative.

Second notation for negative margin layout　

HTML is the same as above, CSS is as follows

. wrap{width:1000px;margin:0 auto;background: #eee;} wrap. Main-wrap{width:100%;float:right;}. Wrap. Main-wrap. Main{margin-left:300px;background: #cf0;}. Wrap. Side{width:280px;float:right;margin-right:-280px;background: #fdc6bb; _display:inline;zoom:1;}

The Main-wrap is set to the right float, side is also set to the right float, and the margin-right is set to a negative value of side width.

The third way to format negative margin

HTML is the same as above, CSS is as follows

. wrap{width:1000px;margin:0 auto;background: #eee;} wrap. main-wrap{width:100%;float:right;margin-right:-300px; Display:inline;}. Wrap. Main-wrap. Main{margin-right:300px;background: #cf0;}. Wrap. Side{width:280px;float:left;background: #fdc6bb;}

The Main-wrap is set to the right float and set margin-right to a negative value, which is the width of the left side of the content + left side spacing, the main setting margin-right positive, and the left side of the content + the width of right and left spacing

Fourth notation of negative margin layout

Html:

   <div class= "Wrap clearfix" ><div class= "main" ><p> right fixed width </p><p> right fixed width </p><p > Right Fixed width </p><div class= "clearfix" >clearfixclearfix</div><div style= "Clear:both" >clear: Both;clear:both;</div></div><div class= "side" ><p> left fixed width </p><p> left fixed width </p ><p> left fixed width </p><p> left fixed width </p><p> left fixed width </p><div class= "Clearfix" > Clearfixclearfix</div><div style= "Clear:both" >clear:both;clear:both;</div></div></ Div>

HTML is a little less than a layer, main-wrap

Css:

. wrap{width:1000px;margin:0 auto;background: #eee;}. Wrap. Main{width:700px;float:left;display:inline;margin-right:-100%;margin-left:300px;zoom:1;background: #cf0;}. Wrap. Side{width:280px;float:left;margin-left:0;margin-right:-280px;display:inline;background: #fdc6bb;}

Summary: The first three kinds of negative margin layouts can achieve a fixed width, a column of adaptive layout, the fourth layout is two columns are fixed width layout, but the level is less than the first three of the Div

These layouts are compatible with all browsers, including IE6

Two or one column solid width, one column adaptive layout

1, the common margin layout

One column sets a fixed width, and one column sets the margin value

Html:

<div class= "Wrap Clearfix" > <div class= "left" > <p> fixed width on </p> <p> left fixed width </p> & lt;p> left fixed width </p> <p> left fixed width </p> <p> left fixed width </p> <p> left fixed width </p> </div&　　Gt <div class= "main" > <p> right not fixed width </p> <p> right not fixed width </p> <div class= "Clearfix" >clearf ixclearfixclearfixclearfixclearfix</div> <div style= "Clear:both" >clear:both;clear:both;clear:both; clear:both;clear:both</div> <p> Text text text type text </p> <p> text text text text type text </p> </ Div></div>

Css:

. Clearfix:before,.clearfix:after{content: "";d isplay:table;}. Clearfix:after{clear:both;}. Clearfix{*zoom:1;}. wrap{width:1000px;margin:0 auto;background: #eee;}. Wrap. Left{width:300px;float:left;background: #cf0;}. Wrap. Main{margin-left:300px;background: #fdc6bb;}

　　

The effect is as follows

　　

This layout is compatible with all browsers, including IE6, but there is a problem:

When the left floating fixed content height > right non-floating content height, the right non-floating content inside if there is clearfix content or clear:both content, the content will fall, in the left content height below the beginning of the display.

Content that has clearfix on the left or clear:both content is unaffected.

2. negative margin layout

such as the first three can be achieved

3.Overflow:auto Layout

Html

    <div class= "Wrap clearfix" ><div class= "left" ><p> text content </p><p> text </p><p> Text content </p><p> text content </p><p> text content </p><p> text content </p></div><div Class= "right" ><p> compatible with all browsers </p><p> text content text content text content </p><p> Text content text content text content text content </p><p> text content text content text content text content text content </p><p> text content text content text content text content </p> <p> text content text content text content literal content text content text content text contents literal content content text content literal content Word contents text contents contents literal content Capacity </p><p> Text content text content text content text content text contents </p><p> text content text content text content text contents text content </p></div></div>

Css:

. wrap{width:1000px;margin:0 auto;background: #eee;}. Wrap. Left{float:left;width:300px;background: #fce;}. Wrap. Right{overflow:auto;zoom:1;background: #acd;}

　　

The effect is as follows:

Compatible with all browsers this way you can also implement two-column adaptive layouts

Css

. wrap{width:1000px;margin:0 auto;background: #eee;}. Wrap. Left{float:left;background: #fce;}. Wrap. Right{overflow:auto;zoom:1;background: #acd;}

　　

Neither column sets the width, and the width is adaptive to the width of the content.

Effect:

Three, two columns of high layout

1. Common Nesting method

Html:

    <div class= "Container2" ><div class= "Container1" ><div class= "col1" ><p>column 1</p> <p>column 1</p><p>column 1</p><p>column 1</p><p>column 1</p></ Div><div class= "col2" ><p>column 2</p><p>column 2</p><p>column 2</p> <p>column 2</p><p>column 2</p><p>column 2</p><p>column 2</p><p >column 2</p></div></div> </div>

Css:

. container2{position:relative;overflow:hidden;width:1000px;margin:0 Auto;background:orange;}. Container1{float: left;width:100%;p Osition:relative;left:-300px;background:green;}. col1{width:700px;float:left;position:relative;left:300px;}. col2{width:300px;float:left;position:relative;left:300px;}

　　

Effect:

　　

The outermost container2 sets the total width, the Overflow:hidden, and the right background color,
The second layer Container1 sets the left float, the width 100%,left sets a negative value, which equals the width of the right content
Col1 set the left float, width, and then set positive value = width of the right content
Col2 set the left float, width, and value set positive = width of the right content
Compatible with all browsers, including IE6.

2, the use of positioning method

Html:

<div class= "Wrap clearfix" ><div class= "left" ><p> text content </p><p> text </p><p> Text content </p><p> text content </p><p> text content </p><p> text content </p></div><div Class= "right" ><p> compatible with all browsers </p><p> text content text content text content </p><p> Text content text content text content text content text contents </p><p> text content text content text content text contents text content </p></div></div>

Css:

. Clearfix:before,.clearfix:after{content: "";d isplay:table;}. Clearfix:after{clear:both;}. Clearfix{*zoom:1;}. wrap{width:1000px;margin:0 auto;position:relative;height:200px;background: #eee;}. Wrap. Left{position:absolute;top:0;bottom:0;left:0;width:300px;background: #fa2; _height:100%;}. Wrap. Right{position:absolute;top:0;bottom:0;right:0;width:700px;background: #acd; _height:100%;}

　　

Effect:

You need to add height:100% to the left and right columns under IE6, which is compatible with all browsers

Four, two-column adaptive layouts

1. Overflow:auto layout

Html:

    <div class= "Wrap clearfix" ><div class= "left" ><p> text content </p><p> text </p><p> Text content </p><p> text content </p><p> text content </p><p> text content </p></div><div Class= "right" ><p> compatible with all browsers </p><p> text content text content text content </p><p> Text content text content text content text content </p><p> text content text content text content text content text content </p><p> text content text content text content text content </p> <p> text content text content text content literal content text content text content text contents literal content content text content literal content Word contents text contents contents literal content Capacity </p><p> Text content text content text content text content text contents </p><p> text content text content text content text contents text content </p></div></div>

Css

. wrap{width:1000px;margin:0 auto;background: #eee;}. Wrap. Left{float:left;background: #fce;}. Wrap. Right{overflow:auto;zoom:1;background: #acd;}

Neither column sets the width, and the width is adaptive to the width of the content. Compatible with all browsers including IE6

2. Class Table layout

Html

    <div class= "wrap" >            <div class= "left" ><p> text content </p><p> text content </p><p> text content </p><p> text content </p><p> text content </p><p> text content </p></div><div class= " Right "><p> text content text content text content text content </p><p> text content text content text content content text content </p><p> Text content text content text content text content text content </p></div></div>                    

Css

. wrap{width:1000px;margin:0 auto;background: #eee;d isplay:table;}. Wrap. Left{display:table-cell;background: #fa2;}. Wrap. Right{display:table-cell;background: #acd;}

　　

Effect:

　

This method is incompatible with IE6 and IE7.

You can also set the width for left and right.

Two-column Layout implementation method