Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- Float Issue ¦ CSS Layout


SuzyUK - 5:49 pm on Jul 8, 2008 (gmt 0)


the Aslett/PIE method is indeed getting a bit outdated, but is still perfectly OK if you use it in the style of the clearing for which it filled a role :)

trouble I've now been finding is that it is now overused as a catchall (specially in Drupal's core code :o) and applied to the wrong elements at times

anyway back to the old (pre aslett) way of clearing floats, if you had two (or more) floats that you needed to clear the simplest way was to input an extra HTML element and have it as clear:both, whether that was an empty div, br or hr it didn't matter as long as it was an empty element

so the structure would look like this

<wrapper>
<float><float><float>
--<the clearing element>--
</wrapper>

the clearing element made the wrapper think it had content and pulled the bottom of the wrapper below the bottom of the "empty" element creating the desired look

then along came the Aslett/PIE method which actually relied on creating generated content, which was then made into a block element and clear both was applied to it, in other words you still needed a wrapper to wrap the floats in:

<wrapper>
<float><float><float>
</wrapper>
[generated content - cleared]

it wasn't that the wrapper or floats were cleared but it had the desired effect, it cleared the floats after the generated content

It should have only ever been applied to the <wrapper> element by generating content after itself BUT it has got to the point of being overused, like a "magic bullet" where some will now apply this technique to the float itself. Thing is this will work (I think) in some cases, i.e. if it's the last float of a series, but you see the misunderstanding here.. (I haven't though about it that deeply, as it's now obsolete..)

In theory it should be OK if you know the last float of a series and want to clear it.. but if you're going to that you may as well use the last float's sibling and apply clear: left; to it, in other words why use the workaround.

so yes the newer techniques of floating the wrapper or adding overflow (anything other than visible) to the wrapper make it much clearer again, and of course that means we take IE's auto clearing behaviour into play like before too

in other words, in this interim phase between IE6 and advanced selector support I'd continue to use a wrapper and clear that wrapper with the method of your choice. and fwiw I would use a newer method over the Aslett method these days too, in fact I've only found the Aslett method 'necessary' for NN6 for the last couple years (and support of that is now ditched so not worth it) hence PIE's note I presume.

Since FF got overflow right, overflow or float are the tools for the job .. Opera afaik, has worked with both the IE dimensioning method and the overflow method for a while too

edited to reflect that two in the original sample can be two or more

[edited by: SuzyUK at 7:31 pm (utc) on July 8, 2008]


Thread source:: http://www.webmasterworld.com/css/3693162.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com