Example of css two-column layout (compatible with ie, ff, 360)

I. Fixed-width layout

1. The sidebar is on the left.

The code is as follows:

Copy code

<Div id = "wrapper"> <Div id = "header"> header </div> <Div id = "container" class = "cls"> <Div id = "aside"> <Div class = "inner"> aside </div> </Div> <Div id = "main"> <Div class = "inner"> main </div> </Div> </Div> <Div id = "footer"> footer </div> </Div> # Header {width: 980px; height: 90px; margin: 0 auto; background: # f60 ;} # Container {width: 980px; height: 500px; margin: 0 auto ;} # Aside {float: left; width: 240px; height: 500px; background: # ccc ;} # Main {float: left; width: 740px; height: 500px; background: orange ;} # Footer {width: 980px; height: 90px; margin: 0 auto; background: # 08f ;}

Effect

 

2. Right-side navigation pane

The code is as follows:

Copy code

<Div id = "wrapper"> <Div id = "header"> header </div> <Div id = "container" class = "cls"> <Div id = "main"> <Div class = "inner"> main </div> </Div> <Div id = "aside"> <Div class = "inner"> aside </div> </Div> </Div> <Div id = "footer"> footer </div> </Div> # Header {width: 980px; height: 90px; margin: 0 auto; background: # f60 ;} # Container {width: 980px; height: 500px; margin: 0 auto ;} # Main {float: left; width: 740px; height: 500px; background: orange ;} # Aside {float: left; width: 240px; height: 500px; background: # ccc ;} # Footer {width: 980px; height: 90px; margin: 0 auto; background: # 08f ;}

Effect

 

II. Adaptive layout

1. Fixed adaptive settings on the right of the left column

The code is as follows:

Copy code

<Div id = "wrapper"> <Div id = "header"> header </div> <Div id = "container" class = "cls"> <Div id = "aside"> <Div class = "inner"> Aside <Br> <br> <br> </Div> </Div> <Div id = "main"> <Div class = "inner"> Main <Br> <br> <br> </Div> </Div> </Div> <Div id = "footer"> footer </div> </Div> # Header {width: 96%; height: 90px; margin: 0 auto; background: # f60 ;} # Container {width: 96%; margin: 0 auto ;} # Aside {float: left; width: 240px; background: # ccc ;} # Main {margin-left: 240px; background: orange ;} # Footer {width: 96%; height: 90px; margin: 0 auto; background: # 08f ;}

Effect

 

2. Fixed adaptive settings on the left of the right bar

The code is as follows:

Copy code

<Div id = "wrapper"> <Div id = "header"> header </div> <Div id = "container" class = "cls"> <Div id = "main"> <Div class = "inner"> Main <Br> <br> <br> </Div> </Div> <Div id = "aside"> <Div class = "inner"> Aside <Br> <br> <br> </Div> </Div> </Div> <Div id = "footer"> footer </div> </Div> # Header {width: 96%; height: 90px; margin: 0 auto; background: # f60 ;} # Container {width: 96%; height: 500px; margin: 0 auto ;} # Main {float: left; width: 100%; background: orange ;} # Main. inner {padding-right: 240px ;} # Aside {float: left; width: 240px; margin-left:-240px; background: # ccc ;} # Footer {width: 96%; height: 90px; margin: 0 auto; background: # 08f ;}

Effect