3 column Fluid Layout

The challenge

  1. Must not use CSS filters
  2. Must not rely on structural hacks for clearing
  3. Must not use cryptic CSS rules
  4. Must mimic "min-width" and "max-width" in Internet Explorer
  5. Must not rely on lengthy Styles Sheets
  6. Must be browser friendly (see Browser Support)

The structural hacks in the Template file are only needed for Netscape v. 4 & 6.

This page shows the basic technique, you can download that template (16Kb) with its associated files.

The Logic

The image below shows how things work.
As you can see, we shift #container to the left without "floating" #sidebar.

The logic in term of markup and CSS

The Markup

View as plain text

  1. <body>
  2. <div id="outer_wrapper">
  3. <div id="wrapper">
  4. <div id="header">
  5. <h2>Header</h2>
  6. <p>...</p>
  7. <!-- /header --></div>
  8. <div id="container">
  9. <div id="left">
  10. <h2>Left</h2>
  11. <ul>
  12. <li>...</li>
  13. <li>...</li>
  14. <li>...</li>
  15. <li>...</li>
  16. <li>...</li>
  17. </ul>
  18. <!-- /left --></div>
  19. <div id="main">
  20. <h2>Main</h2>
  21. <p>...</p>
  22. <!-- /main --></div>
  23. <!-- This is for NN6 -->
  24. <div class="clearing">&nbsp;</div>
  25. <!-- /container --></div>
  26. <div id="sidebar">
  27. <h2>Sidebar</h2>
  28. <p>...</p>
  29. <!-- /sidebar --></div>
  30. <!-- This is for NN4 -->
  31. <div class="clearing">&nbsp;</div>
  32. <div id="footer">
  33. <h2>Footer</h2>
  34. <p>...</p>
  35. <!-- /footer --></div>
  36. <!-- /wrapper --></div>
  37. <!-- /outer_wrapper --></div>
  38. </body>

Top of the page

The Styles Sheets

Sheet for modern browsers

Find out how to import this sheet

View as plain text

  1. /* Copyright 2004 - 2007 - TJK Design ~ divaHTML */
  2. #outer_wrapper {
  3. /* because "min-width" and "max-width" are not supported by IE, I use Conditional Comments with CSS expression */
  4. min-width:740px;
  5. max-width:1400px;
  6. /* this is to "minimize" an IE bug related to background painting, but because it creates a gap below the footer, the same declaration is also added to #footer */
  7. width:100%;
  8. }
  9. #wrapper {
  10. /* used for faux-column technique */
  11. }
  12. #header {
  13. /* this is to "give layout" to the element and fix some peek-a-boo bug in IE (v6 sp2) */
  14. width:100%;
  15. }
  16. #container {
  17. float:left;
  18. width:100%;
  19. /* IE doubles the margins on floats, this takes care of the problem */
  20. display:inline;
  21. margin-left:-200px;
  22. }
  23. #left {
  24. float:left;
  25. width:150px;
  26. /* IE doubles the margins on floats, this takes care of the problem */
  27. display:inline;
  28. margin-left:200px;
  29. }
  30. #main {
  31. /* the width from #left (150px) + the negative margin from #container (200px) */
  32. margin-left:350px;
  33. }
  34. /* good to know: if #sidebar is to be shorter than #main, then there is no need for this rule */
  35. #sidebar {
  36. /* this is to keep the content of #sidebar to the right of #main even if the content of "main is shorter */
  37. padding-left:100%;
  38. /* this is to "bring back" the #sidebar that has been moved out of the viewport because of the padding value */
  39. margin-left:-200px;
  40. }
  41. #sidebar p {
  42. /* this is to make sure IE (v6 sp2) *displays* this element (same problem as #header, but using a different fix) */
  43. position:relative;
  44. }
  45. #footer {
  46. /* see #outer_wrapper */
  47. width:100%;
  48. /* this is to clear #container */
  49. clear:both;
  50. }
  51. /* this is the class that is applied to 2 structural hacks in the markup. The first "meaningless" element is used to clear #left in NN6 and the last one is used to clear #container in NN4 */
  52. .clearing {height:0;clear:both;overflow:hidden;}

I am only listing the rules related to layout.

Top of the page

Sheet for v4- browsers

Find out how to import this sheet in NN4

View as plain text

  1. /* Copyright 2004 - 2007 TJK Design ~ divaHTML */
  2. #container {
  3. float:left;
  4. width:auto;
  5. padding:0 160px 0 0;
  6. margin:0 160px 0 0;
  7. }
  8. #left {
  9. float:left;
  10. width:140px;
  11. padding:0 0 10px 0;
  12. }
  13. #main {
  14. background-image:url(/img/left-NN.gif);
  15. background-repeat:repeat-y;
  16. margin:0 5px 0 0;
  17. padding:0 0 0 20px;
  18. }
  19. /* use the width here to "position" the content of this DIV */
  20. #sidebar {
  21. background-image:url(/img/left-NN.gif);
  22. background-repeat:repeat-y;
  23. float:right;
  24. width:165px;
  25. padding:0 10px 10px 10px;
  26. }
  27. .clearing {
  28. clear:both;
  29. }

Because of NN4, it is important to use root relative paths to images in Styles Sheets.

How to achieve min-width and max-width in Internet Explorer

We assign a JavaScript expression to the CSS width property on two different containers; and since CSS expressions works only in IE Win 5+, we hide them inside Conditional Comments.

View as plain text

  1. <!--[if IE 6]>
  2. <style type="text/css">
  3. /* Min and Max Width for IE6 */
  4. #outer_wrapper {width:expression(documentElement.clientWidth > 1400 ? "1400px" : "100%" )}
  5. #wrapper {width:expression(documentElement.clientWidth < 740 ? "740px" : "100%" )}
  6. </style>
  7. <![endif]-->
  8. <!--[if IE 5]>
  9. <style type="text/css">
  10. /* Min and Max Width for IE5 */
  11. #outer_wrapper {width:expression(document.body.clientWidth > 1400 ? "1400px" : "100%" )}
  12. #wrapper {width:expression(document.body.clientWidth < 740 ? "740px" : "100%" )}
  13. </style>
  14. <![endif]-->

Download the template (16Kb) with its associated files.