Muffinresearch Labs by Stuart Colville

CSS Drop Column Layout | 36 Comments

Posted in CSS on 7th February 2006, 12:05 am by

Simon Collison posted an article about his new fixed width 3-column layout which is made possible with a dash of javascript to alter the layout based on the resolution of the client’s window. For more on Simon’s layout see this post. Tim referred to my site in the comments on Collylogic saying that my site covered the same functionality without requiring javascript. So this post is a more detailed explanation on how my layout works.

When 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. To explain in greater detail here is a visual:

Diagram of resizing browser window causing 4th column to drop

To achieve the desired effect I am using floats. A natural property of a floated element is to drop down when there isn’t enough room until there is enough space. This means that the column on the furthest right will drop when the window is re-sized. One of the issues with this would be if the primary content column was not high enough the displaced column would wrap underneath it. To combat this undesired effect I have used a wrapper with a left margin to ‘hold’ the 3 smaller columns to the right of the primary content.

Limitations

There are a couple of limitations with this technique. The 4th (quaternary) column will drop underneath the 2nd (secondary) column if the 2nd (secondary) column is the same height or less tall than the 3rd (Tertiary) column.

A min-width was set on the body so that a horizontal scroll-bar will appear if the window is resized below 770px. This doesn’t work in IE and neither does the proprietary expression.

The demos

The following demos are grossly over simplified but give you an idea of how this layout works.

Update: Richard Rutter has written up a concise round up of related layouts in response to Colly’s original post.

A Belorussian translation of this post has been kindly provided by Amanda Lynn

Post Tools

  • http://www.collylogic.com Colly

    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!

  • http://thedredge.org Andy Hume

    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.

  • http://www.muffinresearch.co.uk Stuart

    @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!

  • http://www.andreagandino.com Andre

    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.

  • http://www.zachinglis.com Zach Inglis

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

  • http://www.designinnovations.net Jonathan Shroyer

    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]-->
  • http://www.muffinresearch.co.uk Stuart Colville

    @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.

  • http://www.somerandomdude.net P.J. Onori

    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.

  • Szymon

    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).

  • http://nickpresta.be Nick Presta

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

    Good work.

  • http://www.muffinresearch.co.uk Stuart Colville

    @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.

  • http://www.gaffling.com/ Suchmaschinen News

    Great big thing for the Web 2.0 – Thanx

  • http://klog.kfiles.de Konrad

    In my IE it still doesn’t work correct :-(

  • http://www.muffinresearch.co.uk Stuart

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

  • http://www.0fx.info Hedonist

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

  • http://mrvworx.moved.in mrv

    nice i’ll try that one…

  • Pingback: CSSElite CSS Gallery » CSS Drop-Column Layout

  • http://www.bestaussieshops.com Shops

    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?

  • http://muffinresearch.co.uk Stuart Colville

    @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.

  • Pingback: » Collapsible Layout - Fensterbasierendes Layout — cne _LOG Archiv

  • Pingback: Minimizr » Blog Archive » Minimal CSS

  • Pingback: (glob) » Archives » Jell-O-Press Wordpress Theme — basic layout

  • kwurzel

    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

  • http://muffinresearch.co.uk Stuart Colville

    @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

  • Pingback: css 英文相关文章以及站点 - 第8音 Design Everying

  • http://mobbing-gegner.de macdet

    thx for sharing. the right solution for my site :)

    hope i can do it :(

  • http://allanwhite.net/ Allan W.

    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.

  • http://thoughton.co.uk/ Tim Houghton

    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!

  • http://www.thoughton.co.uk Tim Houghton

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

  • Pingback: links for 2008-02-26 « nonimage

  • Pingback: Best Of March 2008 | Best of the Month | Smashing Magazine

  • richest myint

    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.

  • juergen

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

    greetings from munich,
    juergen

  • Pingback: WEB 3.0 » Blog Archive » ¿Así que querías saber de CSS?

  • Pingback: Adaptive CSS-Layouts: New Era In Fluid Layouts? | CSS | Smashing Magazine

  • Pingback: Cascading Style Sheets Reference Links | kabayview.com

Insert a tab character in vim when expand tabs is on|(0)

I have vim set-up to use spaces in place of tabs. Sometimes you need to use an actual tab e.g. editing a Makefile. Now whilst it’s possible to change settings so that tabs are used for specific files, a quick tip to remember is to simply type in insert mode:

Ctrl+v tab

That is Ctrl and “V” and hit the tab key, et voila you’ve entered an actual tab.

GNU screen: open tab in current working directory|(1)

A nice trick for having screen open a new tab in the same directory as the one you’re currently in. To use it add it to your .screenrc

# Open new window in current dir.
bind c stuff "screen -X chdir \$PWD;screen^M"
bind ^c stuff "screen -X chdir \$PWD;screen^M"

Hat tip: mteckert on SuperUser.com

Photos on Flickr

© Copyright 2004-13 Stuart Colville, all rights reserved. May contain traces of Muffin. Powered by WordPress. Hosting by Slicehost.com This page was baked in 0.491s.