|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
|
2 <style type="text/css"> |
|
3 .multicol { |
|
4 margin: 1em; |
|
5 border: solid silver; |
|
6 width: 300px; |
|
7 -moz-column-width: 100px; |
|
8 -moz-column-gap: 0; |
|
9 height: 100px; |
|
10 } |
|
11 |
|
12 .step { |
|
13 height: 10px; |
|
14 border: 15px aqua; |
|
15 border-style: none solid; |
|
16 } |
|
17 .float { |
|
18 float: right; |
|
19 width: 15px; |
|
20 background: aqua; |
|
21 height: 240px; |
|
22 } |
|
23 .L { |
|
24 float: left; |
|
25 } |
|
26 |
|
27 .container { |
|
28 width: 100%; |
|
29 background: red; |
|
30 } |
|
31 |
|
32 .clear { |
|
33 clear: left; |
|
34 height: 0; |
|
35 background: red; |
|
36 } |
|
37 .bar { |
|
38 border-bottom: orange solid; |
|
39 } |
|
40 </style> |
|
41 |
|
42 <p>The orange line should be halfway down the third column |
|
43 (immediately after the end of the aqua lines). |
|
44 |
|
45 <div class="multicol"> |
|
46 <div class="step"></div> |
|
47 <div class="container"> |
|
48 <div class="float L"></div> |
|
49 <div class="float R"></div> |
|
50 </div> |
|
51 <div class="clear"><div class="bar"></div></div> |
|
52 </div> |