I. Fixed-width layout of three columns
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 = "content" class = "cls"> <Div id = "main"> <Div class = "inner"> Main <Br> <br> <br> </Div> </Div> <Div id = "content-aside"> <Div class = "inner"> Content-aside <Br> <br> <br> </Div> </Div> </Div> </Div> <Div id = "footer"> footer </div> </Div> # Header {width: 980px; height: 90px; margin: 0 auto; background: # f60 ;} # Container {width: 980px; margin: 0 auto ;} # Aside {float: left; width: 240px; background: # ccc ;} # Content {margin-left: 240px ;} # Main {float: left; width: 540px; background: pink ;} # Content-aside {float: left; width: 200px; background: orange ;} # Footer {width: 980px; height: 90px; margin: 0 auto; background: # 08f ;}
|
The effect is as follows:
II. Adaptive width layout with three columns
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 = "content" class = "cls"> <Div id = "main"> <Div class = "inner"> Main <Br> <br> <br> </Div> </Div> <Div id = "content-aside"> <Div class = "inner"> Content-aside <Br> <br> <br> </Div> </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 ;} # Content {margin-left: 240px ;} # Main {float: left; width: 100%; background: pink ;} # Main. inner {padding-right: 200px ;} # Content-aside {float: left; width: 200px; margin-left:-200px; background: orange ;} # Footer {width: 96%; height: 90px; margin: 0 auto; background: # 08f ;} |
The effect is as follows: