3Col_NN4_FFFF - header
ordered columns, all float model

column 1

column filler

column filler

column filler

test link

column 2

column filler

column filler

column filler

test link

 

column 3

column filler

column filler

column filler

column filler

column filler

column filler

column filler

column filler

column filler

column filler

column filler

column filler

test link

 
 
Footer

Column Order

Column Widths

Spacing between columns

Width of Col one calculated automatically. Values are percentages. Spacing between columns ensures rounding errors cannot force columns to drop.

Column Spacing

Overall Styling

Misc

 

  1. /* ====================================================================
  2. box layout
  3. -------------------------------------------------------------------- */
  4. .columns-float
  5.     {
  6.     float : left;
  7.     width : 70%;
  8.     }
  9. /* the relative positioning is required by IEs 5 + 6 (PC) - NN4 crashes if it sees them while other browsers don't seem to mind - hence the Caio hack */
  10. .column-one
  11.     {
  12.     width : 50%;
  13.     float : left;
  14.     }
  15. .column-two
  16.     {
  17.     width : 50%;
  18.     float : right;
  19.     }
  20. .column-three
  21.     {
  22.     width : 30%;
  23.     float : right;
  24.     }
  25. .box-footer
  26.     {
  27.     clear : both;
  28.     }
  29. /* ====================================================================
  30. box-clear requires all sorts of hackery because of the way the
  31. different browsers cope with clearing floats
  32. see [# #]
  33. -------------------------------------------------------------------- */
  34. .box-clear { clear: both; line-height: 0px; font-size: 1px; }
  35. /* IE5 (mac) dealt with, now reset font-size for Geckos,
  36. turn off for IE5 (PC) + OmniWeb and back on for IE6 (PC)
  37. see [http://www.fu2k.org/alex/css/test/OmniWebInlineHack.mhtml] */
  38. /*\*/
  39. .box-clear { font-size: medium; }
  40. .fake.box-clear { display: none; }
  41. /* */
  42. /* Turn off for Opera 6 and below */
  43. html>body div.box-clear { display: none; }
  44. /* And turn it back on again for good honest browsers
  45. see [http://www.albin.net/CSS/OwenHack.html] */
  46. head:first-child+body div.box-clear { display: block; }
  47. /* ====================================================================
  48. nn4clear is as its name suggests, only required for NN4 compatibility
  49. If you don't need that you can remove both this rule and the
  50. relevant div from the html
  51. -------------------------------------------------------------------- */
  52. .nn4clear { clear: both; line-height: 0px; font-size: 1px; }
  53. /*/*/ .nn4clear { display: none; } /* */
  54. /* ====================================================================
  55. box styling
  56. -------------------------------------------------------------------- */
  57. .box-wrap
  58.     {
  59.     padding : 0px;
  60.     color : #000000;
  61.     background-color : #cccccc;
  62.     }
  63. .box-header
  64.     {
  65.     margin : 0px;
  66.     padding : 12px;
  67.     color : #000000;
  68.     background-color : #996699;
  69.     border : none;
  70.     }
  71. .box-footer
  72.     {
  73.     margin : 0px;
  74.     padding : 6px;
  75.     color : #000000;
  76.     background-color : #999966;
  77.     border : none;
  78.     }
  79. .column-one-content
  80.     {
  81.     background : #ff6666;
  82.     }
  83. .column-two-content
  84.     {
  85.     background : #66ff66;
  86.     }
  87. .column-three-content
  88.     {
  89.     background : #6666ff;
  90.     }
  91. .column-one-content, .column-two-content, .column-three-content
  92.     {
  93.     margin : 0px;
  94.     padding : 6px;
  95.     border : none;
  96.     }
  97. /* CSS HACK: position:relative needed by IE6 otherwise the header and col 2 don't show up on initial rendering - they're there but you have to minimise the window or switch to another app and back to see the full effect. But IE5(pc) doesn't like it. And nor does NN4.
  98. NB. the use of pos:rel has to go way beyond skin-deep - any nested element that needs a background colour appears to require to be be relatively positioned */
  99. /*/*/
  100. .box-wrap, .columns-float, .column-one, .column-two, .column-three, h2
  101.     { p\osition: relative; }
  102. /* */
  103. /* ====================================================================
  104. other styling
  105. -------------------------------------------------------------------- */
  106. body
  107.     {
  108.     margin : 0;
  109.     padding : 5px;
  110.     font-family : helvetica,arial,sans-serif;
  111.     font-size : 12px;
  112.     background-color : #999999;
  113.     color : #000000;
  114.     }
  115. div
  116.     {
  117.     margin : 0px;
  118.     padding : 0px;
  119.     }
  120. h1
  121.     {
  122.     margin : 0px;
  123.     padding : 0px;
  124.     }
  125. h2
  126.     {
  127.     margin : 0px 0px 9px 0px;
  128.     padding : 0px 3px 0px 3px;
  129.     color : #ffffff;
  130.     background-color : #000000;
  131.     font-size : 1em;
  132.     font-weight : bold;
  133.     }
  134. p
  135.     {
  136.     margin : 0px;
    137.     }

Valid XHTML 1.0 Valid CSS Public Domain Dedication

Back to CSS index