Examples: floats… #3

…positioned and removed…

hide and seek…

If you wanna follow my floats on this page, you better have a wide enough screen. 1280 will do fine, but anything narrower will cover some floats.

Oh, never mind I wrote that. You'll see enough floats down this page anyway. They are all over the place, and they are all nested inside each other — as usual.

NOTE: this example is updated to go with general styles in this site-section. I've also taken advantage of improved CSS-support in the latest browser-versions.
25.oct.2005

“Why is he putting something like this on display”, you may ask. The answer is simple: I use the methods displayed below in actual web design, so this, and the other pages about floats and positioning, acts as reminders for how it's done. I'm old, and keep forgetting things all the time, so little notes like this are good to have – somewhere.

Someone else may come up with something useful for my float methods, and I see no reason to hide them from view. They are not that bad, or (?)

This page with its deep element-nesting and complex positioning, will create serious problems for a few, older, browser versions. This means it fits right in on a site like this, where one of the main purposes is to challenge browser with real-world solutions.

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 IE/win 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 "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, 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 IE/win bugs…

There is a difference between IE/win and the good browsers here, and one have to keep that in mind when using negative margins.
- 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. You'll see that on narrow browser-windows.
- IE/win on the other hand, have lost these floats completely if they go outside the window.

Another weak spot in IE/win 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 IE/win precise values in each case, but more fluid solutions won't work well in IE/win with right-floats.

one more a'float…

This one seems to be ready for launch. I'm already wondering what kind of float-behavior the next one will put on display. Things seems to be floating alright these days…

sincerely georg; sign