1. No div, no float, no clear, no hack*, no joke! A CSS layout that does not use DIV, FLOAT, CLEAR nor structural HACK!

    Spread the word!

    Header

    1. Section 1

      About this layout

      1. Linearized, each section is as wide as the viewport's width.
      2. Fixed width in pixels: 220,580
      3. Elastic width (in em): 20,35
      4. Fixed width in pixels: 210,400,190
      5. Elastic width (in em): 12,29,14
      6. Fluid width in %: 20,60,20
        with min/max (800px/1200px)
      7. Fluid width in %: 20,60,20
      8. Fluid center in modern browsers, but all widths are set in "%" in IE 5 and 6.
        Note that background colors and borders are set in IE using a structural hack ("i" and "b" elements). These elements are only used for IE and only with this layout.

      1 Column Layout

      2 Column Layout

      3 Column Layout

      step-by-step tutorial

      Add content belowRemove content (a floated DIV)

      Vel fuisset abhorreant ne, mollis voluptua mediocritatem ut sea, sea sale labore ullamcorper an. Et eos possim perpetua, id partem gloriatur sea. Eu sit quem possim, modus oratio te pro? An pri accumsan evertitur rationibus, cum ei iriure constituto. At per soluta lucilius phaedrum.

      Ut tota exerci oportere nam, mucius vivendo est no. Qui an postea iriure dolorum, graecis conceptam scriptorem eos at, eripuit bonorum neglegentur eu usu? Sit id rebum epicuri consectetuer, iusto incorrupte pro cu, nec ea propriae hendrerit! Cibo fastidii sea ne, nam ex equidem lucilius expetendis, sit mazim harum adipiscing cu.

      Ut tota exerci oportere nam, mucius vivendo est no. Qui an postea iriure dolorum, graecis conceptam scriptorem eos at, eripuit bonorum neglegentur eu usu? Sit id rebum epicuri consectetuer, iusto incorrupte pro cu, nec ea propriae hendrerit! Cibo fastidii sea ne, nam ex equidem lucilius expetendis, sit mazim harum adipiscing cu.

      Qui an postea iriure dolorum, graecis conceptam scriptorem eos at, eripuit bonorum neglegentur eu usu? Sit id rebum epicuri consectetuer, iusto incorrupte pro cu, nec ea propriae hendrerit!

      Ut tota exerci oportere nam, mucius vivendo est no. Qui an postea iriure dolorum, graecis conceptam scriptorem eos at, eripuit bonorum neglegentur eu usu? Sit id rebum epicuri consectetuer, iusto incorrupte pro cu, nec ea propriae hendrerit! Cibo fastidii sea ne, nam ex equidem lucilius expetendis, sit mazim harum adipiscing cu.

    2. Section 2

      What's the deal with "no FLOAT"?

      ez-css Putting the 'less' in table-less layouts. css-101 logo
      No FLOAT means fewer IE bugs:
      • Doubled Float-Margin bug,
      • Three Pixel Text-Jog bug,
      • Etc.
      No FLOAT means there is no need to use a script or a "faux-column" technique to paint backgrounds and/or borders:

      We do not rely on background images to draw backgrounds and borders and we do not rely on a script or CSS expressions either. These borders or backgrounds are painted from top to bottom regardless of columns' content.

      » Note that the two different techniques we are using here for IE could be used with floats as well.

      No FLOAT means less chance of users who are not well versed into CSS breaking something:

      For example, using clear:both; inside a column won't clear another column.

      No FLOAT means no need to use structural hacks like these:
      • <div class="clearFloat"></div>
      • <br class="clearFloat" />

      Is it "semantic"?

      The markup of this document is DIVless. Its structure relies entirely on OLs (Ordered Lists).
      Why? Because in my opinion lists create a meaningful relationship between the different sections of a document. Note that without CSS, the browser's default styling translates the hierarchy that exists between the sections through "indentation" (can we call that semantic layout?). If I was using DIVs, it would be just "flat" and meaningless. However, here's what I really think about this.

      Is it "safe"?

      I am using the following declarations to make sure these layouts behave more or less the same as FLOAT constructs:

      With these, browsers do not expand the width of a container depending on its content.
      table-layout:fixed /* good browsers */
      overflow-x:hidden /* IE lt 7 */
      With this one, IE does not cut off long strings.
      word-wrap:break-word

      » Note: overflow-x:hidden and word-wrap:break-word are served to IE lt 7 only.

      Is it really clear-less?

      All containers (header, columns, footer) will enclose floats and none of them need to clear anything. For your information, all divs that can be added at the bottom of the columns (when clicking "Add content below";) are floats.

      Is it that cool?

      • In IE lt 7, all width need to be explicit to have the sections not behave like block-level elements, so this solution will not let you create a layout with a fluid column (i.e. two fixed side columns with fluid center) that is cross-browser compatible (as this one shows). If this is what you're looking for, then you should stick with a float construct... or use a table (just kidding).
      • The sequence of the columns depends on the source order, which means:
        • You will not be able to have your "content" column comes first in the markup unless you want to display it as the first column.
        • You will not be able to swap the order of the columns using CSS unless you change the order in which the sections appear in the markup (for what it's worth, I never thought this was a "cool" CSS feature as I find it very disturbing to have the tabbing sequence not matching the visual layout/flow).

      What about IE Mac?

      Fixed and elastic layouts are float constructs, but there is no fluid ("%") solution for this browser, thus IE Mac users will not see the three "fluid links" in the menu. As a side note, the script errors that show in IE Mac are triggered by the Google ad scripts on this page.

      Want to tell me something?

      To report a bug, an error, something I missed or even to call me names for using LIs instead of DIVs please use this feedback form.

      Add content belowRemove content (a floated DIV)

      Vel fuisset abhorreant ne, mollis voluptua mediocritatem ut sea, sea sale labore ullamcorper an. Et eos possim perpetua, id partem gloriatur sea. Eu sit quem possim, modus oratio te pro? An pri accumsan evertitur rationibus, cum ei iriure constituto. At per soluta lucilius phaedrum.

      Ut tota exerci oportere nam, mucius vivendo est no. Qui an postea iriure dolorum, graecis conceptam scriptorem eos at, eripuit bonorum neglegentur eu usu? Sit id rebum epicuri consectetuer, iusto incorrupte pro cu, nec ea propriae hendrerit! Cibo fastidii sea ne, nam ex equidem lucilius expetendis, sit mazim harum adipiscing cu.

    3. Section 3

      step-by-step tutorial

      Great, but does it work?

      This solution has been successfully tested with the following browsers:

      • Windows
        • IE 5.01
        • IE 5.5
        • IE 6
        • IE 7
        • IE 8 Beta 1
        • Firefox 0.8
        • Firefox 1.5
        • Firefox 2.0
        • Opera 9.0
        • Opera 9.24
      • Mac
        • IE 5.2 *
        • Safari 2.0
        • Safari 3.0
        • Firefox 2.0
        • Mozilla 1.7.3
        • Camino 0.8.2
      • Linux
        • Konqueror
        • Mozilla
      • iPhone

      Comment them out:

      #sideBar {
         ...
      /* 
         float: left;
         display: inline;
      */
         width: 12em;
      }
      /*
      div.clear {
         clear: both;
         font-size: 0;
         height: 0;
      }
      */
      

      Paypal Donate

      Add content belowRemove content (a floated DIV)

      Vel fuisset abhorreant ne, mollis voluptua mediocritatem ut sea, sea sale labore ullamcorper an. Et eos possim perpetua, id partem gloriatur sea. Eu sit quem possim, modus oratio te pro? An pri accumsan evertitur rationibus, cum ei iriure constituto. At per soluta lucilius phaedrum.

      Ut tota exerci oportere nam, mucius vivendo est no. Qui an postea iriure dolorum, graecis conceptam scriptorem eos at, eripuit bonorum neglegentur eu usu? Sit id rebum epicuri consectetuer, iusto incorrupte pro cu, nec ea propriae hendrerit! Cibo fastidii sea ne, nam ex equidem lucilius expetendis, sit mazim harum adipiscing cu.

      Ut tota exerci oportere nam, mucius vivendo est no. Qui an postea iriure dolorum, graecis conceptam scriptorem eos at, eripuit bonorum neglegentur eu usu? Sit id rebum epicuri consectetuer, iusto incorrupte pro cu, nec ea propriae hendrerit! Cibo fastidii sea ne, nam ex equidem lucilius expetendis, sit mazim harum adipiscing cu.

      Ut tota exerci oportere nam, mucius vivendo est no. Qui an postea iriure dolorum, graecis conceptam scriptorem eos at, eripuit bonorum neglegentur eu usu? Sit id rebum epicuri consectetuer, iusto incorrupte pro cu, nec ea propriae hendrerit!

  2. Footer

    Creative Commons License This work is licensed under a Creative Commons License.
    Copyright © 2007 - Thierry Koblentz :: TJK Design