Examples: floats… #3

…positioned and removed…

completely removed…

Floats can be partially, but also completely, removed from the flow. That's something most web designers may not enjoy all that much, as it is hard enough to get absolute positioned elements to behave outside the flow, if we shouldn't add removed floats into the mix also.

the right margin is not here.

the bottom margin is not here.
Where are those floats?

These margin-indicators don't find any float-edges to line up towards, so they just collapse against the outer edge of this text-area and each other.

The good thing is that none of my browsers display the slightest sign of confusion. They all line my removed floats up in the patern I've created, and do so with only a couple of pixels variation between themselves. I think that's pretty well done, actually.

floats and margins:
float: left;
width: 50px;
height: 100px;

/* margins on float 1 */
margin: -20px -1000px -1000px -510px;

Note the massive negative margins at the right and at the bottom of these left-floats. That's the trick needed to make IE6 play ball. Since these margins are much larger than the floats themselves, all browsers simply calculate their dimensions to be equal to zero. Thus these floats are in a sense “non-existent”.

The top and left margins are applied as 5 different classes, and take care of the positioning-part. Positioning is not affected by the negative back-side margins, so positioning in itself is quite easy.

Added to this is the zero width/height container the floats are positioned from. This container itself is positioned smack in the middle of the main column – a left-float controlled by a margin-left of 50%. This center-point makes the floats act as if they themselves are centered, which of course is something a float is incapable of.

more IE6 (and IE7) bugs…

The good browsers still act – correctly – as if these floats take up space in the window, and show it by providing scroll-bars when needed. The horizontal scroll-bar will show up for floats overflowing the page on the right side on narrow browser-windows.

IE6 on the other hand, have lost these floats completely if they go outside the window – no horizontal scroll-bar provided until window is narrowed to that of minimum width for the page itself.

Another weak spot in IE6 is its inability to handle backside margins on right-floats the same as on left-floats. Not really a problem as long as we serve IE6 precise values in each case, but more fluid solutions won't work well in IE6 with right-floats.

IE7's layering (z-index) is as flawed as in IE6, so a workaround is hacked in to prevent the spread floats from disappearing behind the right column in these old browsers. One minor “buggy hide” is left for you to see.

one more a'float…

I have revised this page a few times over the last 7 years, as although IE6, and IE7, are obsolete by now, the “removed float” method is as useful as ever.

All major browsers released in 2009 and later handle negative margins on floats in accordance with W3C standards. So whenever we need an alternative to absolute positioning, or just some fancy element-manipulation, floats with negative margins come handy.

sincerely  georg; sign

Hageland 24.feb.2005
26.jan.2009 - minor revision.
16.jan.2011 - avoided an iteration bug in Opera caused by an IE6 fix, by using the 'star html' hack to target IE6 (and older) only.
04.sep.2012 - minor correction for side-notes layering.
last rev: 04.sep.2012

Examples: floats…


floating around on the web, in a basket made of nested floats…

Section

  • introduction
  • Table of Content

About

  • this is PTL web-design
  • CSS sledgehammer
  • accessibility
  • Print enhanced page
  • Projection enhanced
  • Small Screen enhanced page
  • validity of xhtml and CSS
  • html tidy
  • Opera and me
  • Firefox vs. IE
the usual
  • the author
  • Copyright
the unusual
  • Molly speaks up
the additional
  • Examples
  • Demo pages

internal resources:

external resources:


about…
…2005 - 2012