Float and margin form a webpage Layout Framework

Naming rules:

1. layout of the entire bar (. con-m)

2. Two-bar layout (. con-sXm0)

3. Three-bar layout (. con-sXm0eY)

The naming conventions are as follows:

1. When the unit column width is a multiple of 40px,

SX indicates the width of con-sub = X * 40-10,
EY indicates the width of con-extra = Y * 40-10,
M0 indicates the width of con-main = total width-(X + Y) * 40,
S m e can be sorted in full order, and sXm0eY indicates the order of each column.

For example, if the total width is 950px, The. con-e6m0s5 represents con-extra (230) | con-main (510) | con-sub (190 ).
The corresponding style is:
. Con-e6m0s5. con-main {margin: 0 200px 0 240px ;}
. Con-e6m0s5. con-sub {width: margin PX; margin-left:-margin PX ;}
. Con-e6m0s5. con-extra {width: 230px; margin-left:-100% ;}

2. When the unit column width is not a multiple of 40px, X and Y in sX and eY indicate the width.

For example, if the total width is 950px, The. con-s120m0e50 represents con-sub (120) | con-main (760) | con-extra (50 ),
The corresponding style is:
. Con-s120m0e50. con-main {margin: 0 130px 0 60px ;}
. Con-s120m0e50. con-sub {width: 120px; margin-left:-100% ;}
. Con-s120m0e50. con-extra {width: 50px; margin-left:-50px ;}

Public Style

. Container {width: 950px; margin: 0 auto; ZOOM: 1 ;}. container: After ,. main-wrap: After ,. con-Sub: After ,. con-extra: After ,. con-Main: After {content: "\ 20"; clear: Both; display: block ;}. main-wrap {width: 100%; Background-color: # ace; float: Left; Min-Height: 1px ;}. container ,. main-wrap ,. con-sub ,. con-extra ,. con-Main {ZOOM: 1 ;}. con-sub ,. con-extra {float: Left ;}. con-Main {border: 1px solid red ;}. con-sub {width: 188px! Important; Border: 1px solid green;}. Con-extra {width: 188px! Important; Border: 1px solid blue;}/* sidebar layout 950 */. con-m {width: 100%;}/* layout of the two columns --750 */. con-s5m0. con-Main {margin-left: 200px ;}. con-s5m0. con-sub {width: pixel PX; margin-left:-100%;}/* two-column layout: 750--190 */. con-m0s5. con-Main {margin-Right: 200px ;}. con-m0s5. con-sub {width: pixel PX; margin-left:-pixel PX;}/* three-column layout: horizontal --550 --550 */. con-e5s5m0. con-Main {margin: 0 0 0 400px ;}. con-e5s5m0. con-sub {width: pixel PX; margin-left:-750px ;}. con-e5s5m0. con-extra {width: pixel PX; margin-left:-100%;}/* layout in the three columns --550--190 */. con-s5m0e5. con-Main {margin: 0 200px 0 200px ;}. con-s5m0e5. con-sub {width: pixel PX; margin-left:-100% ;}. con-s5m0e5. con-extra {width: pixel PX; margin-left:-pixel PX;}/* three-column layout 550--190--190 */. con-m0s5e5. con-Main {margin: 0 400px 0 0 ;}. con-m0s5e5. con-sub {width: pixel PX; margin-left:-390px ;}. con-m0s5e5. con-extra {width: margin PX; margin-left:-margin PX ;}

Div Layout

<div class="container con-m"><div class="main-wrap">main-wrap</div></div><div class="container con-m">
Preview Effect