A List Apart: Negative Margins
Wednesday, June 16, 2004 at 5:48 am | 
Comments off
I'm proud to announce that my first article for A List Apart was published this morning. "Creating Liquid Layouts with Negative Margins" dives into the little touched on subject of negative margins and how they can be utilized. Using the method that I describe in the article, you are able to keep your XHTML well-structured, with the content coming before the sidebar in the source code.
So, drop me a note if you use this technique on your site!
Comments
Negative margins is one of the techniques I rather like too. Very good article there. Good work getting on ALA too. Hmm while I'm at it I might plug my own work: http://www.jixor.com/experiments/2/ You'll not be wanting to use IE for that one!
Ryan,
I was first introduced to your technique in a Mezzoblue Friday Challenge quite some time ago; I copied the three-col version expanded from the two-col one by one of commenters to be used somewhere on a later project, and for others wanting to know how it works (of course with due acknowledgment!!!).
I'm glad to see this compelling article on ALA from your own hand so I can always find it back, or refer others to it. Way to go!!!
Been using your technique since I saw it on mezzoblue. Even gave you credit in the CSS...
#container {
margin-right: -275px; /* Thanks, Ryan Brill! */
}
Although I am not fan of Zeldman, I suppose I'll congratulate you with your progression young fellow.
Nice to see new people on ALA as i too and not a great fan of Zeldman, Meyer and all those other people (not Dan [simbleBits], that person i do like)
But it is nice to see normal people get work published and you should use that as a selling point on your business site (i know i would).
Good job Ryan.
Thanks for the kind words, guys. It's nice to see the technique actually being used on people's sites. Keep 'em coming. ;)
Great article, I enjoyed it. Both my website and my job's corporate website have used this technique. I just started learning CSS about 6 months ago, and that was the first method of a dual-column layout. Nice work Ryan!
Hey Ryan, excellent job! I've been learning from this technique, and I'm going to use it on the layout of the next version of Dat_Forum. And yes, I am ditching the dark backgrounds. ;)
Good job Ryan!
I feel especially happy for you coz we go back to the days of WebDev Forums when we were still learning to adopt CSS in our "daily lives." :-)
Hi Ryan!
Once again, great job. I love the article. Although I am confused on one point.
margin-right:-20px;
Would push it 20px from the right, correct?
Great work, Ryan; and to think I regarded you as a professional before! I'm glad you got something posted on a major site like ALA, it's sure to get you more traffic to this site, and in turn to Infinity Web Designs- maybe you'll get some more business from it. It's a good article as well, you're a good writer. Heh, even I understood it. :)
I'm a graphic designer by trade, but lately I've tried my hand at coding, and come to love css! Even people who love me says I'm not the sharpest knife in the drawer, but a little help from people like you sharpened me enough to do this minisite: http://www.tapeinternational.no/trad-www !
Congrats, Ryan.
A well-written, helpful read.
Now you're a heavy hitter (don't forget the little people)!
I am defo gonna use this one. I've been struggling a bit with CSS for layout on a few sites but your explanation makes it seem so simple! thanks
Nice work, Ryan.
FYI: Using this layout technique is highly advantageous for purposes beyond accessibility.
Point of fact, one method used by SEO folk is keyword proxmity. KW proxmity is the distance between the <body> tag and beginning of site content.
It's a simple principle. The closer the two are, the better, thus making the "crawl" by searh engine spiders far more relevant. In other words, the spider hits the <title>, <meta> tags, a pinch of parsing, and if the proxmity is on, your content is its next stop.
Most marketing firms will use table-based layouts with a dab of hacks to accomodate a favorable proxmity, but the enormous benefits of using CSS-P, especially your recent article, are quite obvious.
And, the code is ultra clean, which is a cool thing to have whether you're in e-business or not. :-)
Hi Ryan,
I love your article...at the moment I try to use this technique for my DHTML API...it works fine. There is only one problem: I always have the well known 3px bug in IE in the first line of the main content container. I see the bug in your ALA Example too... I´m still testing but until this very moment I see no solution (I tried all the 3px hacks). Due to the fact that this 3px problem is not visible in your 2-column example, I see the reason in the nesting structure...If you have any ideas...
Comments are automatically closed after 45 days
June 16th, 2004
12:17 PM | #
Hands up! Me, I am... with a minor tweak to get two columns to the right of the content. Good stuff Ryan :-)