additions...

…web design…

how the layout works…

I've “undressed” one of my 2-column versions and exposed parts of the construction. Don't be confused by all the back and forth manipulation and apparent overlapping of containers. Remember: this is a “float-based negative margins” layout.

1. main containers exposed
2. all outer containers exposed
3. inner containers exposed
4. undressed and uncluttered

I think those demos expose enough for now. I may add more demos later, as they are quite useful tools for exploring future designs and cross-browser stability. I discovered (and killed) 4 new IE7 bugs while creating them.

If you're not familiar with how margins can be used to manipulate floats, then the following might be of interest. All on my site, but with links to external resources if you need more information.

1. nested and partly removed
2. nested and spread
3. positioned and removed
   • how margins affect floats

Those examples should pretty much explain how my basic layout works.

To spell it out once more: the space occupied by an element can be controlled by its margins as much as its dimensions. The unique thing about floats is that a float's backside margins can be subtracted in order to reduce occupied space to something smaller than the element's own intrinsic or declared dimensions.

complexity causes confusion…

The many wrappers or div-containers I use seem to confuse some web designers on the look-out for inspiration. Few seem to notice that only a few of those wrappers are really necessary for the layout to work in today's browsers, and the rest are redundant style-​hooks. That's what I mean by “overbuilt and overstyled”.

The layout is also “over-secured” against IE/win's many calculations and whitespace bugs, giving IE plenty of space to fool around on and dump its bugs without visually affecting the layout. I haven't just provided one or two pixels playroom here and there for that old bugger, I've provided hundreds of pixels free horizontal space in places. Lots more than ever needed of course, but it doesn't show.

divitis in action:

Some call such heavy use of divs “divitis”, and so do I. Must be something wrong with web standards and browsers when so many divs must be used in order to assure cross-browser stable appearance, or maybe there's something wrong with me.

I could certainly do without all those wrappers, and I wouldn't mind keeping my layouts at the bleeding edge and forget all about browsers with weak and buggy standard-support. Wouldn't work well as delivery-​vehicles for my articles and stuff though, so I think I'll keep it the way it is for a few more years.

growing redundancy:

Most (but not all) of the redundant wrappers were necessary back when I created this layout, as cross-browser compatibility and standard-​compliance was a lot worse back in 2003 than it is now. Not that things have improved all that much, but browsers have definitely become better, not worse, over the years.

I had to wait for browsers and standards to catch up with my ideas, so the redundancy-factor has grown into my old layout-base and will (hopefully) continue to grow in the years to come. It's called “progress”.

So I knew this would happen back then, and made sure it wouldn't affect my designs in a negative way. I hacked my layout, not the browsers. The result is a pretty robust™ design that can take a lot of stress across browser-​land – just as planned.

it's all part of an illusion…

Ok, so I do make heavy use of those redundant wrappers to create the illusion of “equal height columns” and other visual effects. I then destroy that illusion somewhat by making my main column appear as separate boxes scaling on their own, and this mix of illusions creates even more confusion.

Now, why didn't I stick to one, obvious, illusion..? Indeed, I could have designed a simple, 2 and 3 equal (or non-equal) height column visual illusion – just like most others. However, that wouldn't meet my needs, so why should I?

I really didn't need another “the best that could be done at the time” solution, but rather a testbed for what could be done in the future. Creating individual test-​cases is a limited option, that I do make heavy use of anyway.

what I aimed for:

I needed a multi-column solution where I had full control over source-​order vs. visual order. I tend to create, design, and also read, web pages without CSS, and I prefer main content first in a web page.

There wasn't, and there still isn't, a well-​working layout-​technique for multi-​column source-​ordered designs, so I was left with hacking those floats. Not that I mind using floats, but floats present severe limitations as main layout-​method.

I decided to add redundancy, extra style-hooks, to the source-code, so I could play around with the visual design without having to bother about source-​order, and I've never regretted that decision. A few major, and a chain of minor, changes and improvements have gone into the different variants of this layout by now, and more will surely come.

I haven't found it necessary to make a single change to the basic HTML structure since it was created back in october-​november 2003. It just works.

redundancy provides options…

This flexible layout-base allows me to push an entire site forward in the process of exploring standards and developing new solutions. I don't like limitations, so I have made sure there aren't any significant ones left in here.

a few options:

• The structure is tailor-made for 3 columns, regardless of what it's used for.
• The structure allows for visual switching of columns in any order.
• The structure allows for column-illusions that doesn't rely on background-​images.
• The structure allows for many more illusions that do rely on background-​images.
• The redundancy allows me to switch the layout and layout-parts between “fixed”, “fluid”, “elastic” and “conditional elastic” and any mix of these layout-variants.

The above is of course just the beginning, as anyone somewhat proficient in CSS is perfectly aware of.

recent example:

(october 2007) I wanted to add proportional scaling to the main sections – making their width scale with font-​size. I also wanted to keep them fitting snugly within even quite narrow browser-​windows, so the width had to stay fluid, within limits.

This technique is known as conditional elastic, and is easy to design into “elastic” or “all fluid” layouts. However, it is not quite so easy to add such a technique to only one part of an existing “fixed-​fluid-​fixed” layout.

The actual solution is complex enough to be better suited for another article, but anyone who can resize fonts and change window-width can test that my old layout were up for the task at hand. This very section will scale with font-​size – if, and only if, there's available space to scale on.
Again: it just works – thanks to the redundant source-​code I could tap into.

layout-exposure over…

This article is late, but now it is written. If you think there's a lack of details in my description, you're right. I see no point in describing layouts-details as such, since it's the layout-​methods that matters. Methods must be learned and mastered from the bottom up, and then all details will fall into place all by themselves.

The layout in itself is not meant to be copied and used by others – it is mine. The layout is probably not very well suited for copy and paste anyway, and I can't offer any help to those who get lost in it.

I certainly don't mind if others extract a bit of inspiration for their own design-​attempts though, so feel free to explore. Watch the steps.

sincerely 

Hageland 13.nov.2007
15.sep.2007 - created examples and started writing article.
13.nov.2007 - launced article.
15.nov.2007 - minor revision.
22.jan.2009 - minor revision.
last rev: 22.jan.2009