1 Interesting, but...

Interesting article.

I believe that this technique is only useful for variable-width layout, though. A fixed-width content div could easily be put before the sidebar and then just floated. No need for a negative margin workaround.

posted at 05:48 am on June 15, 2004 by amon-re

2 The Future

Will CSS3 add anything that will remove the need for all the extra divs?

posted at 06:01 am on June 15, 2004 by Loz

3 The Power of CSS

This is truly innovative, Ryan. Example 3 is very clean in its source. While “unconventional”, it does have a certain obviousness to it(20/20 hindsight). Thanks,
Kevin

posted at 06:01 am on June 15, 2004 by Kevin Etter

4 Just what I was looking for

I was having problems with a two column/footer layout. Mine was fixed width but using float instead of trying to absolutly position things was perfect. I did some CSS hacking after reading this article and it really saved my bacon!

posted at 06:16 am on June 15, 2004 by Sean

5 Float the content

Isn’t it easier to just float the content DIV?

I’m working on a new layout that will do just that. The content is floated to the left, and the sidebar slots in on the right. An added complication is the fact that they will be truly fluid, with both columns having their widths defined by percentages.

I haven’t yet figured out a way to incorporate faux columns into this new layout. It works, but browser inconsistencies spoil it.

posted at 06:39 am on June 15, 2004 by Simon Jessey

6 liquid Faux columns

The Faux columns are pretty easy to implement.

based on a 20% width sidebar, create a 2000px wide 10px height image, set 400px (20% of the width) to the colour/design of you choice, then set this as the background image of the containing div with an image position of 20% 0; offset and eh voila. There may be some browser differences but it’s one of the better methods for faux column in liquid layouts

posted at 07:08 am on June 15, 2004 by Colm

7 Need for no top and bottom margins

I’ve found that adding any top and bottom padding to a DIV keeps the top and bottom margins of internal elements from bleeding outside the DIV. Even a 1 pixel margin is enough to prevent this annoyance.

posted at 07:34 am on June 15, 2004 by Greg

8 Mezzoblue

I first read about this negative-margin magic at mezzoblue.
http://www.mezzoblue.com/archives/2004/01/23/friday_chall/index.php
Great solution Ryan!

The clerar DIV thing. It is possible without extra markup:
http://www.positioniseverything.net/easyclearing.html

posted at 07:42 am on June 15, 2004 by Janos Horvath

9 The same technic

My website currently in development is using the same technic. I based my layout on: http://www.webproducer.at/flexible-layout/

posted at 07:44 am on June 15, 2004 by Machuidel

10 Abs Positioning on the menu

Or you could just make the right hand margin of the content 200, and then set the menu to be absolutly positioned with top and right

posted at 07:53 am on June 15, 2004 by Dave

Discussion Closed

New comments are not being accepted, but you are welcome to explore what people said before we closed the door.

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)