Examples: floats… #1

...nested and partly removed...

nesting floats - take one…

4 identical nested floats— divs, nicely arranged to overlap 10px+1px border-width to the right, and 1px+1px border-width down. A 100×100px area, will grow to 102×102px because of those 1px borders, so I get a top margin offset of 1px for free. That's box-model calculations— W3C style. I added 1px more, just as a visual effect

...oh, sorry. I forgot about Internet Explorer on windows, so this won't work. IE/Mac isn't doing too well either. But take a good look at how Internet Explorer 6 (and older versions) expands those divs — while you have the chance. Use Internet Explorer, of course.

ordinary margins on floats:

float: left;
width: 100px;
height: 100px;
margin: 1px 0 0 10px;

basic HTML:

<div><div><div><div>
<!-- add content here -->
</div></div></div></div>

Internet Explorer will expand outer containers until everything fits inside, with margins and all. Having 4 nested containers makes it look even worse.

Note that I run Internet Explorer 6 in quirks mode. I always do...
This is affecting the box-model calculations, as IE6 will now do it Microsoft style. However, the difference is not noticeable visually, as long as we don't add padding to those boxes.

nesting floats - take two…

4 identical nested floats, nicely arranged to overlap 10px+1px border-width to the right, and 1px+1px border-width down.

What's up? Internet Explorer is rendering fine... There must be a hack somewhere.

No, there isn't. I just told Internet Explorer what all the good browsers know already: If it doesn't fit inside - let it overflow and recount those margins. Do not expand those boxes.

To be precise: those margins shall be where they were before anything were added inside the box.

negative margins on floats:

float: left;
width: 100px;
height: 100px;
margin: 1px -12px -3px 10px;

Why '-3px' on bottom? It's actually the border on both top and bottom, and the 1px margin on top, that is added in Internet Explorer's logic. We have to calculate this ourselves since Internet Explorer won't do it, and it doesn't disturb any of the good browsers since they already know...

a real IE hack

display: inline;

I use this on all float-examples on this page, to avoid the "margin-doubling bug" on the left margin, in Internet Explorer. It doesn't disturb other browsers in most cases, and we just have to serve it to IE/win exclusively (hack it in) if it does.

nested floats - exposed…

Exposing all 4 floats by removing the background. A box in a box in a box...

See something wrong here?

This 'second paragraph' is overlapping those floats...

This is the easiest way to show what can be done with floats: they can be taken partly out of the flow. The overlapping text flows in from the right and up from below, because I've given it some space to flow up into. Now you can see more clearly where those margins really are.

more negative margins on floats:

float: left;
width: 100px;
height: 100px;
margin: 1px -50px -50px 10px;

All browsers will pull back those back-side margins when they are told. Negative margins can pull back the right side and the bottom side of a left floating element - without affecting dimensions and/or position. That leaves space open for surrounding elements to flow into, as if that part of the floats do no longer exist. This will happen even if we clear an element, as I've done with the 'second paragraph'.

This is the behavior we expect from absolute positioned elements, but there isn't an absolute positioned element in sight. Besides; absolute positioning can't do it half way - can it?

Floats on the other hand, can go all the way from positive - to negative - to be completely taken out of the flow, just by pulling their margins. Floats will still act as floats though, and will position themselves as such.

There's a tiny difference in visual display between Internet Explorer and the good browsers, since IE is still trying to expand the outer boxes— Microsoft style. If you like to count pixels, then do so. I don't think it is worth a hack.

Another difference is more noticeable, in that one may need to use layering to make the text stay on top in Internet Explorer.

layering elements:

position: relative;
z-index: 1;

Use this on the floats and other elements— if needed, and set z-index from zero and upwards to layer each element. I use 'z-index: 0;' on the floats, and 'z-index: 1;' on my paragraphs. No hack needed, since all browsers should understand this layering correctly.

nested floats - with more offset…

One more time. A box in a box in a box... uh?
...sorry about that. I'm leaving the background in place, just to make it look cleaner. So we have a box on top of a box on top of a box...
 

This is weird...

This 'second paragraph' is overlapping those floats...

I'm pulling the top margin, and that affects positioning since a float rests on its top margin. A float can/should not go higher than the position it starts out at in the flow — that is 'unless I tell it to'. Floats are nice this way... they can go wherever I want them to, based on their original position.

even more negative margins on floats:

float: left;
width: 100px;
height: 100px;
margin: -7px -50px -50px 10px;

Remember that these boxes are 100px wide/high + border-width, so -7px on the top margin results in -6px visual offset.

Note also that the overlapping text is positioning itself with respect to the first - outer - box. Compare with the exposed case above, which use the same code for that part.
This is logical, but it is worth noticing that visual and logical positioning isn't always the same thing. Browsers will, or at least should, follow the logic of our code— not our visual expectations.
How many have fallen into the "visual expectation trap"? 

is that all..?

Well... no, not quite. This is just the first page in a series, you know. There's so much more we can do with floats, that I won't run out of material for years to come.

How about this?

...narrow the browser-window and see where this little text in a floating <pre> ends up...
          (who said I couldn't float a <pre>..?)
                    we can float anything, one way or the other...

...It's time to set a'float...

sincerely 

Hageland 30.jan.2005
rev: 31.jan.2005
last rev: 15.feb.2013