4 ms·
it's pretty surprising how prevalent `clear: both` is. yes, it works, but you're putting presentational code in your markup more than you need to. let me put i
by treyp 17y ago
it's pretty surprising how prevalent `clear: both` is. yes, it works, but you're putting presentational code in your markup more than you need to.
let me put it in simple terms for people:
you probably don't need to use `clear: both`. almost all of the time, you can use `overflow: hidden` on the parent element instead of `clear: both`.
(the exception of course is when you've got elements with negative margins that would actually be hidden with `overflow: hidden`)
edit: relevant link - http://www.quirksmode.org/css/clearing.html http://www.quirksmode.org/css/clearing.html
- loup-vaillant 17y agoThere is one case in which I don't know how to do away without extraneous presentation divs: I want a 2-columns layout where the left column is written after the right column in my source code. Good for my eye (navigation on the left) and for search engines and text based browsers (relevant text first). Right now, my div structure looks like this: <body> <header /> <div-hackw> <div-hack1> <div-hack2> <article /> </div-hack2> <nav /> -- written after, displayed on the left <div-hackw> <footer /> <body> http://www.loup-vaillant.fr/css/style.css http://www.loup-vaillant.fr/css/style.css http://www.loup-vaillant.fr http://www.loup-vaillant.fr inspired from http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-ems.htm http://matthewjamestaylor.com/blog/ultimate-2-column-left-me... (down right now). Header, footer, nav, and article are okay (they eventually will be actual html5 tags). Hakcw, hack1 and hack2, however, are ugly. Does anyone know of a way to ditch them ?
- loup-vaillant 17y agoEDIT: I did not found the ideal solution: it breaks when the middle column isn't wide enough. I finally found the solution (below), inspired from http://www.positioniseverything.net/articles/onetruelayout/anyorder http://www.positioniseverything.net/articles/onetruelayout/a... This layout is source ordered (header article nav aside footer), liquid, and the side columns have a fixed width. You can easily do the same thing with 2 columns only. The only drawback left is the fact that I can't force the columns to share the same height. As far as compatibility is concerned, I think an html 4.1 version will work on any relevant browser. So I think I found my ultimate layout. At last. <!doctytpe html> <html> <head><link rel="stylesheet" href="test.css" /></head> <body> <header> header header header header header </header> <article> article article article article article article article article article article article article article article article </article> <nav> nav nav nav nav nav nav </nav> <aside> aside aside aside aside aside </aside> <footer> footer footer footer footer footer </footer> </body> </html> /* html5 reset */ article, nav, aside, header, footer { display:block; padding:1em; } /* colors */ html { background-color:#fff; } body { background-color:#ddd; } header, footer { background-color:#aaa; } nav, aside { background-color:#8aa; } article { background-color:#a8a; } /* layout */ body { margin:auto; padding:2em; width:35%; } article { float:left; margin-left:5em; margin-right:5em; } nav { float:left; width: 3em; margin-left:-100%; } aside { float:left; width: 3em; margin-left:-5em;} footer { clear:both; }