Appendix DAny Order Columns - Liquid center, fixed-width sides

aka The Holy Grail

We should be able to take the Any Order Columns technique, apply the relevant amount of margin-left and right to the main block and then neg the side columns into position. Something like this:

#block_1
	{
	float: left;
	margin-left: 15em;
	margin-right: 200px;
	}
#block_2
	{
	float: left;
	margin-left: -100%;
	width: 15em;
	}
#block_3
	{
	float: left;
	margin-left: -200px;
	width: 200px;
	}

In theory that's great, but it only actually works in Safari. To make it work (after a fashion) in IE, Firefox and Opera requires expressions and other odd difficult to fathom kludges.

The solution is a wrapping element. The nice thing though, is it only has to wrap the first block. The wrapping element is 100% wide and floated. Now we can apply those left and right margins on the first block to get it into place and the negging can proceed.

Semi-interactive example of the Any Order technique with fluid main column and fixed width ancillary columns

Hang on a minute

Some of the different scenarios need slightly different handling - but it's still a very simple technique.

How different? Well the quirks are:

For orderings 3-2-1 and 2-3-1

Explorer needs the central column shifted over by the width of the left column, otherwise it buts up flat on the very left. Fortunately setting position: relative and its left value to the width of the left column does the job.

Example of the Any Order technique with fluid main column and fixed width ancillary columns (3-2-1 ordering)

Example of the Any Order technique with fluid main column and fixed width ancillary columns (2-3-1 ordering)

For ordering 2-1-3

#block_3 needs to be floated right (in all the other cases, all the floats are in the same direction so this is the closest there is to a gotcha) Explorer overdoes the -100% negging and just requires a negative margin that is the same as its width

Example of the Any Order technique with fluid main column and fixed width ancillary columns (2-1-3 ordering)

Works in...

IEs 5.01, 5.5, 6.0 on the PC, Firefox 1, Operas 8, 7 (.02 though .54), and the latest Safari.

Wheels beginning to fall off...

Netscape 7.2 fails to clear the footer properly.

IE5 on the mac gets a horizontal scroll bar that extends to where the width of the page would be if the neg-floated elements had actually floated to the right of the main column. But it does work, so it's just an unfortunate side effect as far as I'm concerned.

Opera 6 works, apart from 1-2-3 and its mirror 3-2-1. Not that it matters ;) However, it looks as if judicious Opera hacking could overcome this.

Doesn't work in...

Unsurprisingly, Opera 5 doesn't display the columns as columns at all.

Fitness for public consumption

I presume that as with the non-fixed width ancillary columns, that this technique is a) nestable, b) possible with additional columns and c) amenable to the Equal Height Columns method.

However, because I personally have no use for this type of layout, I have not tested these presumptions.

No wrapper - slight return

Of course, another problem with not having a wrapper element around the first block, is that, since it is floated but has no explicit width, the block will only be as wide as its content makes it. If there's not enough content to expand the block to fill the available space, the margin-right will not reach the right hand edge of the viewport and the rest of the positioning will be out of wack.

Now we could assume that there will always be enough content to expand things just so, or we could do something like:

#block_1:after
	{
	content: '.';
	display: block;
	float: left;
	width: 100%;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	}

Nice try, but only Opera really gets it. Safari and Mozilla prefer something along these lines:

#block_1:after
	{
	content: '. . . . . . . . . . . . . . . . . . . .
	. . . . . . . . . . . . . . . . . . . . . . . . .
	. . . . . . . . . . . . . . . . . . . . . . . . .
	. . . . . . . . . . . . . . . . . . . . . . . . .
	. . . . . . . . . . . . . . . . . . . . . . . . .';
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	}

But Opera hates it with a passion. A solution could be fashioned out of this material, but really, until browsers get their act together, the additional wrapper is just so much less of a drag...

Position is Everything