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.
FLOAT
“?FLOAT
means fewer IE bugs: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.
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.
FLOAT
means no need to use structural hacks like these:<div class="clearFloat"></div>
<br class="clearFloat" />
The markup of this document is DIV
less. Its structure relies entirely on OL
s (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 DIV
s, it would be just “flat” and meaningless. However, here’s what I really think about this.
I am using the following declarations to make sure these layouts behave more or less the same as FLOAT
constructs:
table-layout:fixed
/* good browsers */overflow-x:hidden
/* IE lt 7 */word-wrap:break-word
» Note: overflow-x:hidden
and word-wrap:break-word
are served to IE lt 7 only.
clear
-less?All containers (header, columns, footer) will enclose floats and none of them need to clear anything. For your information, all div
s that can be added at the bottom of the columns (when clicking “Add content below”;) are floats.
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. If this is what you’re looking for, then you should stick with a float
construct… or use a table (just kidding).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.
To report a bug, an error, something I missed or even to call me names for using LI
s instead of DIV
s please go to @thierrykoblentz.
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.
This solution has been successfully tested with the following browsers:
#sideBar { ... /* float: left; display: inline; */ width: 12em; } /* div.clear { clear: both; font-size: 0; height: 0; } */
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!
This work is licensed under a Creative Commons License.
Copyright © 2007 – Thierry Koblentz