11 Solves a problem, but what was it?

After reading the article, I believe that Ryan Brill’s technique works, but I’m not sure why or how.

From the article:
…
The negative right margin has more to do with allowing the sidebar to float up into this element’s space than it does with any positioning/appearance
…

Could someone elaborate on why the use of a negative margin is the key to making this technique work? I saw on Mezzoblue (http://www.mezzoblue.com/archives/2004/01/23/friday_chall/index.php) that columns floated left and right can end up stacking vertically rather then apearing side by side w/o negative margins. Do negative margins work around some type of CSS implementation bug??

Thanks,
Eric Everman

posted at 10:33 am on June 15, 2004 by Eric Everman

12 Sidebars without the extra "wrapper" div

The #wrapper div is a structural hack that, at least with this design, is unnecessary. It seems that you can apply a background color to the #container div that is the same as the sidebar (#e5e7d3) and apply a 1-pixel border to the right side of the #content div.

I haven’t played with the three column example, but I suspect that the extra div may be unnecessary there as well. Alternately, if you need a fancier border effect, you can apply a repeating, right-aligned background image to the #content div. Now, both of these techniques will fail if the content takes less vertical space than the sidebar, however, so will the illusion of the header and footer.

posted at 10:42 am on June 15, 2004 by Mark Kawakami

13 Re: clearing without extra markup

When will people stop promoting that PIE method of clearing without extra markup. It’s an absurd solution! Exchange one, ONE unecessary(in an ideal world) <div> for SEVERAL lines of bloated, idealist code?

Just not worth it… and not very sensible.

posted at 12:03 pm on June 15, 2004 by Seth Thomas Rasmussen

14 What it solves

Eric and Dave.

What’s so special about this implementation is that any column can be longest, fluid and/or fixed while staying source ordered. This combination makes it so powerful.

posted at 12:13 pm on June 15, 2004 by Machuidel

15 Nice interesting article

Ryan,

Very interesting article. The link I included is my modest efforts on using negative margins to try and achieve interesting looking sites. Consider it W.I.P.

Comments welcome

posted at 04:29 pm on June 15, 2004 by Alex Billerey

16 clearing

just a reminder – extra div will be on every page on your site (there can be hundreds of them) and will travel on every request, while CSS is in one file and instantly cached.

posted at 04:30 pm on June 15, 2004 by John Doe

17 CSS3

This is a really good article, don’t get me wrong.

The most striking thing I got from this article, though, is what a pig the current web design methods are. It is such a mammoth effort to achieve such a straight-forward effect. By my count, it took 1000 words for the good Mr. Brill to explain how to make a website with two columns. Ridiculous!

What’s being done to ensure CSS3 (etc.) isn’t equally useless?

posted at 07:25 pm on June 15, 2004 by Richard D. Bartlett

18 Other Uses

Until I discovered margin-left: auto as an alternative, I was using negative margins to center items. While I don’t recall the exact code to have that functionality – it did do something similar to what’s been done here.

I’d be curious if there were a way to have resizing columns – that is a completely variable width solution to a 3 column layout..currently you’re stuck with some number of defined pixels…

On a final note – I hadn’t considered using negative margins like this before, probably something of a focused paradigm, and I have to hand it to the author – this is really clever.

posted at 09:41 pm on June 15, 2004 by Mark Elliot

19 Thanks!

Thanks for enlightening me Ryan! I’ve been trying to figure out how to make three liquid columns and a header play along nicely for several weeks, and I’m quite confident you just saved my bacon.

My layout is based on ems instead of pixels (everything is relative to font size,) but I suspect your technique should work just fine.

posted at 12:18 am on June 16, 2004 by Max Romantschuk

20 browser support?

Can we get a list of what it works in?

Mac ie 5?
Safari?
Win ie 5?

Any weird problems anyone’s noticed, like ie6 makes your grandmother gassy if in strict mode and no background is set?

posted at 02:56 am on June 16, 2004 by stylo~