Examples: floats... #2

...nested and spread out...

floats all over the place…

No need to spread divs around a page just because we need some floating boxes. We can nest them first, and position them later.

I think that sounds a bit strange, so lets just float slowly down the page and see if we can't make floats a bit clearer.

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.
31.oct.2005

Before starting — make a note: Just because something can be done doesn't mean it should be done. Most of what I exemplify on this, and other pages, are design-methods — how things work. Once we know our tools, we can use them when we need them.

The main subject on any web page should be content. Styling isn't worth much if it gets in the way of real content, no matter the style-methods used. Any web page is best when the content is lifted forward, not drowned in styling.

NOTE that all references to Internet Explorer refer to old IE6. Thus, unless you feel particularly nostalgic you can ignore all references to that browser and its problems and bugs by now.
15.dec.2012

nesting floats - and spreading them…

I hope you're not using Internet Explorer, because this little float-trick is beyond what that old browser can handle on its own. This is nested divs defined as floats, and Internet Explorer will expand containers to make everything fit inside. Remember also that floats are defined to contain other floats by default, and the whole thing will make a little more sense.

No background here, or else it would be impossible to see how these floats expands in Internet Explorer.

floats and margins:

float: left;
width: 50px;
height: 100px;

/* margins on float 1 */
margin: -1px 0 0 10px;
/* margins on float 2, 3 & 4 */
margin: -1px 0 0 60px;

The -1px top-margin is compensating for the 1px border-width, so these floats lines up on top.

basic HTML:

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

This works perfectly well in all good and standard-compliant browsers. No, it doesn't help one bit to let Internet Explorer 6 run in its "not so very standard compliant mode". Internet Explorer 6 will make the same mess of it, no matter what.

nesting floats - and spreading them - again…

Ok, I've done all the calculations manually, and presented the results, so even Internet Explorer understands it now.

Use a little imagination, and see how these nested floats can be used in an image-gallery or for navigation. Or maybe use them to spread a set of decorative background-images around. Each of these nested divs can be given its own background and whatever else we can come up with.

Imagine these small boxes as big boxes that can make up a whole page. Positioning floats isn't all that bad, me thinks.

floats and margins:

float: left;
width: 50px;
height: 100px;

/* margins on float 1 */
margin: -1px 0 -3px 10px;
/* margins on float 2, 3 & 4 */
margin: -1px -70px -3px 60px;

A right margin of -70px will counter-act the offset created by a left margin of 60px, with something to spare. The precise value should be -62px, but as you can see: it doesn't matter all that much in most cases, as long as the value is large enough.

There are cases where absolute precision is called for, so make a note of that and keep your calculator handy.

where have all those margins gone…

A wide, black border shows where each browser "thinks" the margins are.

the right margin is here.

the bottom margin is here.

Well, where did you think they were?

floats and margins:

float: left;
width: 50px;
height: 100px;

/* margins on float 1 */
margin: -1px 0 -50px 10px;
/* margins on float 2, 3 & 4 */
margin: -1px -70px -3px 60px;

The "right margin" paragraph is in free flow, and the "bottom margin" paragraph is cleared to stay under the float(s). Note that only the outer float, the left one, has a bottom margin of -50px.

only one float here…

In case you didn't notice it above: only the outer div is recognised by the browsers. That's the left float, visually. Nevertheless, the link in the last, eleventh, float down there to the right, is working as it should.

W3C

the right margin is here.

the bottom margin is here.

Since the right margin on the outer float is 0 (zero), the full width of that div is recognised. The other divs in the nesting have a right margin of -70px, which is a lot more than their own width of 50px, so they are taken completely out of the flow. That's why I can move them down without disturbing this paragraph.

If you make the window narrow enough, the last float with the link will go off screen. All standard compliant browsers will give you a scrollbar when that happens, so you can find the link. Some versions of Internet Explorer will not produce a scrollbar before the page's min-width is reached, so the float with the link will get lost outside narrow windows in those.

floats and margins:

float: left;
width: 50px;
height: 100px;

/* margins on float 1 */
margin: -1px 0 -50px 10px;
/* margins on float 2 - 11 */
margin: 20px -70px -23px 60px;

Note that I had to subtract the top margin from the bottom margin on those sloping floats. That's because Internet Explorer still try to expand to include what's inside each of those boxes, included margins and all.

I have not corrected the 2px width-difference on these boxes between Internet Explorer in quirks mode, and the W3C box model. Neither have I corrected small variations between how the standard compliant browsers handle margins and dimensions. The idea is not to fix everything, but to show how floats can be made to work. The fixes is in the method itself, and all we need to do is to add whatever corrections we want through our own favorite hack— or leave these minor differences as they are.

more to come…

One small step at a time. One day I may have reached the end on what we can do with floats, but I guess W3C must deprecate floats before that happens. See you around – floating.

sincerely georg; sign