Comments: Add yours

1. On February 7th, 2006 at 9:46 am Colly said:

It does work really well – especially in terms of four columns. A perfect use for floats, and the kind of thing that normally happens when I don’t want it to happen!

As I said before, it’s just a shame that IE sucks so badly. I do like the definite cut-off point that I can assign with JavaScript, but I’ll still bookmark your layout!

2. On February 7th, 2006 at 8:23 pm Andy Hume said:

Yep, I like this a lot. It just works – no fuss, and is the kind of thing that makes use of floats for the right reason.

And just think, I’ve visited here enough times and never noticed it! It just works.

3. On February 7th, 2006 at 8:41 pm Stuart said:

@Colly and Andy: Thanks for the positive comments. A useful discussion came out of Colly’s original post which spurred me on to finally writing up this layout properly, which was about time!

4. On February 7th, 2006 at 8:53 pm Andre said:

What can I say? Impressive work, I do really like it.

That’s definitely an intriguing interpretation of "helping your visitors to view your site the best way they can". Thumbs up!

I’m gonna bookmark this one for sure.

5. On February 7th, 2006 at 8:55 pm Zach Inglis said:

This is infact what I’ve used for ZachInglis since version 3.0

6. On February 7th, 2006 at 9:35 pm Jonathan Shroyer said:

Here is the code to have a min-max work in IE. Hope it helps!

(put in head)

<!--[if IE]>
<style type="text/css">
#wrap-page {width: 760px;}
div#wrap-page { width:expression(((document.compatMode &&
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth : document.body.clientWidth)
>  1018 ? "1000px" : (((document.compatMode &&
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth) < 570 ? "552px" : "99.7%")); }

@media print {
div#wrap-page {width: 100%!important;}
}

</style>
<![endif]--> 

7. On February 8th, 2006 at 12:47 am Stuart Colville said:

@Jonathan: Expressions as a prop for min-width work well most of the time but in the case of the floated columns it fails miserably. Interesting the conditional for quirks/standards mode though, I hadn’t seen that before.

8. On February 8th, 2006 at 4:00 am P.J. Onori said:

Very nicely done. There seems to be more and more techniques coming out to give CSS layouts more flexibility. It’s a pity that IE6 holds some of them back.

Great article.

9. On February 8th, 2006 at 10:25 am Szymon said:

It could be done with CSS3 media queries:

@media screen and (max-width: 1000px) { Some CSS here }
@media screen and (min-width: 1000px) { Some CSS here }

But it only works in Opera for now, and the changes aren’t dynamic (but it might be Opera’s issue).

10. On February 8th, 2006 at 5:22 pm Nick Presta said:

This looks pretty cool but it could get annoying with long secondary, etc content.

Good work.

11. On February 8th, 2006 at 5:36 pm Stuart Colville said:

@Szymon: I don’t see any issue in Opera’s support for min-width in any case.

@Nick: Yes you are right, particularly for anyone with their browser open at 800×600.

12. On February 10th, 2006 at 11:27 am Suchmaschinen News said:

Great big thing for the Web 2.0 – Thanx

13. On February 22nd, 2006 at 10:37 am Konrad said:

In my IE it still doesn’t work correct

14. On February 22nd, 2006 at 10:40 am Stuart said:

@Konrad: Can you be a bit more specific? What exactly isn’t working and what version of IE are you using?

15. On May 11th, 2006 at 2:20 pm Hedonist said:

Nice work, I am going to play with it now.

16. On May 27th, 2006 at 9:08 am mrv said:

nice i’ll try that one…

17. On July 4th, 2006 at 5:09 pm CSSElite CSS Gallery » CSS Drop-Column Layout said:

[...] Quick read about how to achieve a drop-column layout without using JavaScript. Link [...]

18. On October 9th, 2006 at 12:12 pm Shops said:

I don’t see the point if it doesn’t work in IE. Is there a better way to do this without excluding 90% of browsers?

19. On October 9th, 2006 at 5:07 pm Stuart Colville said:

@Shops: If you had taken the time to try the examples, you would see that they do work in IE. It’s just that trying to make a scroll-bar appear for when the screen is re-sized below 770px that doesn’t work nicely.

20. On October 9th, 2006 at 9:45 pm » Collapsible Layout - Fensterbasierendes Layout — cne _LOG Archiv said:

[...] Muffin Research – CSS Drop Column Layout (Bsp. ansehen) [...]

21. On October 26th, 2006 at 9:09 pm Minimizr » Blog Archive » Minimal CSS said:

[...] CSS Drop Column Layout [...]

22. On November 3rd, 2006 at 3:38 am (glob) » Archives » Jell-O-Press Wordpress Theme — basic layout said:

[...] Hope dawned when I stumbled over the idea for dropping columns at Muffin Research Labs, a CSS solution that would allow sidebar elements to sit side by side when enough space’s available and otherwise just drop neatly into one column otherwise.1 [...]

23. On August 11th, 2007 at 12:51 pm kwurzel said:

Stuart, thank you very much for this layout, I really like to use it. But i would like so have the first (main) column to be centered, an the other columns float as they do know. Is this possible?

Thanks from Germany
Julius

24. On August 11th, 2007 at 2:54 pm Stuart Colville said:

@kwurzel: Here’s a quick attempt at that using some cheeky offsetting with negative margins and padding to make it work.

http://muffinresearch.co.uk/code/xhtmlandcss/dropcolumn/julius/

Briefly checked in moz, safari, opera and IE6

25. On August 21st, 2007 at 2:15 am css 英文相关文章以及站点 - 第8音 Design Everying said:

[...] CSS Drop Column Layout [...]

26. On September 1st, 2007 at 8:11 am macdet said:

thx for sharing. the right solution for my site

hope i can do it

27. On September 17th, 2007 at 12:36 am Allan W. said:

Is there a way to have all the n-dary columns slip to the bottom if the page width collapses to just the primary column? Just thinking about certain mobile layouts…

Thanks for this, Stuart – a great solution.

28. On September 27th, 2007 at 8:56 am Tim Houghton said:

Stuart, great work, planning on using this on my next project (suitably disguised so I can pretend I’m a CSS god, of course . Was trying to get a centered effect for the whole thing, any suggestions? I saw your solution for Julius so it looks like it should be possible but it’s defeating me!

29. On September 29th, 2007 at 9:05 am Tim Houghton said:

Nevermind, I managed it using Colly’s javascript to adjust the width on a centered container div. Great stuff!

30. On February 26th, 2008 at 10:17 pm links for 2008-02-26 « nonimage said:

[...] CSS Drop Column Layout by Stuart Colville (tags: css html) [...]

31. On March 27th, 2008 at 2:45 pm Best Of March 2008 | Best of the Month | Smashing Magazine said:

[...] CSS Drop Column LayoutWhen I created this site I wanted to have 4 columns which are all fixed width. The idea was that if you resized the window then the columns would drop down when there wasn’t enough room. [...]

32. On July 15th, 2008 at 3:12 am richest myint said:

wow, very nice,
i dont want to use table in web layout so
i try and try to get like this css, right now ok.

33. On September 4th, 2008 at 11:10 am juergen said:

hi stuart,
this is exactly what i’m looking for.
any possiblity to download this wordpress template?

greetings from munich,
juergen

34. On April 18th, 2009 at 1:22 am WEB 3.0 » Blog Archive » ¿Así que querías saber de CSS? said:

[...] CSS Drop Column Layout – Stuart Colvilles [...]

35. On June 9th, 2009 at 3:07 pm Adaptive CSS-Layouts: New Era In Fluid Layouts? | CSS | Smashing Magazine said:

[...] The concept isn’t difficult, and many developers have made their own version of this technique. A great source to find even more examples of adaptive content layouts and scripts is Clagnut.com’s blog post, “Variable fixed width layout“. There is even one such technique featured on this post that requires no JavaScript whatsoever: CSS Drop Column Layout. [...]