float-clear-003.html 913 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  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. .step {
  12. height: 10px;
  13. border: 15px aqua;
  14. border-style: none solid;
  15. }
  16. .float {
  17. float: right;
  18. width: 15px;
  19. background: aqua;
  20. height: 240px;
  21. }
  22. .L {
  23. float: left;
  24. }
  25. .container {
  26. width: 100%;
  27. background: red;
  28. }
  29. .clear {
  30. clear: left;
  31. height: 0;
  32. background: red;
  33. }
  34. .bar {
  35. border-bottom: orange solid;
  36. }
  37. </style>
  38. <p>The orange line should be halfway down the third column
  39. (immediately after the end of the aqua lines).
  40. <div class="multicol">
  41. <div class="step"></div>
  42. <div class="container">
  43. <div class="float L"></div>
  44. <div class="float R"></div>
  45. </div>
  46. <div class="clear"><div class="bar"></div></div>
  47. </div>