[css layout][07] three fixed columns

 

1.

 1 #container {
 2   width: 900px;
 3   margin: 0 auto;
 4 }
 5 #wrapper {
 6   float: left;
 7 }
 8 #content {
 9   margin: 0 200px;
10 }
11 #navigation {
12   width: 200px;
13   float: left;
14   margin-left: -100%;
15 }
16 #extra {
17   width: 200px;
18   float: left;
19   margin-left: -200px;
20 }
21 #footer {
22   clear: both;
23 }

 

 

2.

 1 #container {
 2   width: 900px;
 3   margin: 0 auto;
 4 }
 5 #wrapper {
 6   float: right;
 7 }
 8 #content {
 9   margin: 0 200px;
10 }
11 #navigation {
12   width: 200px;
13   float: right;
14   margin-right: -200px;
15 }
16 #extra {
17   width: 200px;
18   float: right;
19   margin-right: -100%;
20 }
21 #footer {
22   clear: both;
23 }

 

 

3.

 1 #container {
 2   width: 900px;
 3   margin: 0 auto;
 4 }
 5 #wrapper {
 6   float: right;
 7   width: 500px;
 8   margin-left: -200px;
 9   position: relative;
10   left: -200px;
11 }
12 #navigation {
13   width: 200px;
14   float: right;
15   margin-left: -400px;
16   position: relative;
17   left: -400px;
18 }
19 #extra {
20   width: 200px;
21   float: right;
22   margin-right: -300px;
23 }
24 #footer {
25   clear: both;
26 }

 

 

4

 1 #container {
 2   width: 900px;
 3   margin: 0 auto;
 4 }
 5 #wrapper {
 6   float: left;
 7   width: 500px;
 8   margin-right: -200px;
 9   position: relative;
10   left: 200px;
11 }
12 #navigation {
13   width: 200px;
14   float: left;
15   margin-left: -300px;
16 }
17 #extra {
18   width: 200px;
19   float: left;
20   margin-right: -400px;
21   position: relative;
22   left: 400px;
23 }
24 #footer {
25   clear: both;
26 }

 

 

posted @ 2013-11-11 20:37  我的百科全书  阅读(168)  评论(0)  编辑  收藏  举报