• Very nice tutorial Soh, I like the demo!

  • Great tutorial. Good demo and explanation.

  • Gah! Expressions, UA sniffing! Please if you need to target IE utilise conditional comments.

    I think we are safely at a stage where awful hacks to make it work in IE6 are not really needed, progressive enhancement. Let’s leave IE6 in the dust where it belongs.

  • Pingback: Sticky (Fixed) SideNav Layout with CSS « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit()

  • really great effort. thanks

  • Waho… Great tutorial !
    Your demo page is very nice !
    Thanks for sharing

  • Jim

    It appears that the Firefox 3.5.2 update that came through tonight broke the demo. I saw it work earlier, though, and I was very impressed. Hopefully the fix is a simple one.

  • wow! very nice. thanks for the tut

  • It’s really great article. Love the demo and explanation. And very helpfull for us.

  • Pingback: 25 fresh links for my friends and tweeps :) « Adrian Zyzik’s Weblog()

  • pretty sample. but the IE6 fix suck πŸ™‚

  • Really Nice Technique!

    This will also be really useful in web application interfaces.

    Thanks

  • Pingback: 25 fresh links for my friends and tweeps :) | iphone sat extreme blog()

  • this looks very neat

  • Pingback: Links creativos para 03.08/04.08 | Eliseos.net()

  • Very interesting, great tutorial.

  • Diane

    Nice idea, well done article, except for the use of the expressions. Expressions have a very nasty habit if chewing up a pc’s resources in record time until there’s nothing left as the browser continuously executes those expressions.

    I agree that conditional comments should be used to target IE6. I’d love to leave it in the dust, but I can’t. I work for one of those companies that won’t upgrade IE due to legacy programs that were written to only work with THAT browser – and many in the corporate world are similarly stuck.

  • Pingback: Sticky (Fixed) SideNav Layout with CSS | Gery's Blog()

  • Pingback: Sticky (Fixed) SideNav Layout with CSS | Design Newz()

  • Pingback: out of repose: Web Dev Roundup()

  • Pingback: Sticky (Fixed) SideNav Layout with CSS « Lab of Chowky()

  • ah_fui

    coolio….. appreciate your effort.

  • I have seen this on a number of website recently and have been wondering what would be the best way to recreate it, thanks for helping me out.

  • Thank you all for the feedback!

    If anyone has questions feel free to just let me know~ πŸ™‚

  • Great tutorial – many thanks for sharing!

  • vsync

    basically IE expression should never be used, is sake of performances.

    I’ve wrote a jQuery plugin for dealing with floating
    menues and such, its cross-platform and
    also highly flexable with project demands.

    check it out:
    http://plugins.jquery.com/project/stickyfloat

    demo:
    http://plugins.jquery.com/files/stickyfloat_0.htm

  • @vsync – I did something similar on my site: http://www.getnorthern.co.uk – but haven’t constrained the navas it’s not necessary.

    My contact details and Twitter posts also flow with the page however, and I’ve notice that, on longer posts in IE, they can sometimes ‘break out’ of the container. I’ll be having a look at your solution to see if it could help, so thanks.

    Great article by the way!

  • vsync

    @John Goodwin – its not just on IE, but your right side breaks on Firefox also.. when I scroll all the way down.

    you have a well-known bug.
    try to scroll all the way down, then resize your window height to a smaller one, and then scroll down even more.
    it gets into infinite scroll-down.

    my plugin is built for high performance, and should solve your problems.

  • Pingback: #WDNDL For 8/13/2009 – Web Inspirations, CSS & jQuery Tutorials! « CodeEdoc – Technology And Programming News()

  • Would have been nicer to keep that top red bar position:fixed too?

  • Thank you very much! Good tutorial.

    Best Regards

  • I’m going to add this to me site, as i feel the scrolling will become rather large on my blog section.

    Don’t need the jQuery script though, as my navigation is at the top. πŸ˜›

    Great work.

  • adrian

    wow great tutorial
    helped me a lot

  • Pingback: MyInkTrail: Best of the Design Community, August 2009()

  • Pingback: Really Useful Tutorials You Should Have Read in August 2009 | huibit05.com()

  • Pingback: MyInkTrail: Best of the Design Community, August 2009 | Psychokiller()

  • landscribe

    You can’t scroll to the bottom of the left hand nav if your screen/browser window is shorter than the length of the nav. Annoying. In FF3.5.2 anyway.

  • Pingback: MyInkTrail: Best of the Design Community, August 2009 - Programming Blog()

  • Ruana

    Hi,

    I tried to incorporate the menu into one of my websites but it didn”t work in IE7. Some time ago I faced a similar problem when I followed another tutorial on how to code a sticky footer.
    Whatever the reason may be…. YOUR demo page AND MY website both don’t work.

    Can anyone help please?

  • Is there a possibility to get a “head” fixed?

  • Zimtgruen,
    Yes, it’s possible. Here is one example – http://davidwalsh.name/

  • greenvalue

    nice and very useful in general – EXCEPT:
    in your demo the spacing of the list item in the navigation is so generous that on my screen resolution “Folio Focus” is cut off – the items below I can only see once I press F11 for full screen view (which average user knows about that function?).
    That won’t do! Why? Because with this “nice layout” I cannot scroll down to the last navigation links. [Stupid – ain’t it]
    I’m using an ASUS notebook from 2007, set to its maximum resolution; it would be cut off even more on my netbook’s screen.

  • this is really helpful,you gave me something to play with ,thnx

  • Great post but why does the menu have a h2 at the begining, for semantic reasons shouldnt headings etc be exclusively for the content panel. also for SEO reasons its best to not use heirarchy for side content (it usually messes us the h1 -> h5 flow of headings as theres always some joker who has a h2 or less higher in the code which again doesnt make semantic sense.

  • ekly

    If you resize your browser window, the sidebar doesn’t stick anymore, even if you put it back to full size. Am I the only one experiencing that?

    FF 3.5.8
    Opera 10.10 on linux

  • ekly,
    It stays sticky for me when the browser (Firefox) is re-sized and after it’s back to the original size.

  • LX

    The CSS expressions are not really good. Use JS and the onscroll/onresize Events if you really need it in IE6 (though it would not hurt not to show this trick in IE6).

    If you have full control over the HTML, you could use layered divs, one of them with overflow: auto, though the sizes are a bit tricky.

    Greetings, LX

  • Cooooooool Dude

    Worth a 100+ Bucks

    Gret Tut

  • Johnny

    good example, but it doesn’t work perfectly.

    I mean, if you resize the window manually to a lower size (600px width, for instance) and scroll horizontally, the non-fixed part overlays the fixed part.

    Please fix it πŸ™‚

  • Nice tutorial I always like the step by step tutorials great share and great stuff thanks

  • it dont work for me im new to JQuery is there anyway you can do it without Jquery ?? or with javascript or php ?? x

  • Thats one fine example of what CSS can do ! I am so impressed, I am adding this tutorial to my CSS aggregator site. Hope you dont mind.

  • hwany

    Wow, never realised that something so cool was so simple =D

  • YESSS!! Thanks so much for this tutorial. I was trying to avoid the JS and Jquery tidbit for a fixed sidebar and this is perfect πŸ™‚ Definitely retweeting this!

  • Excellent stuff. Been looking for a clear way to handle this in our app for a while.

  • Alex Righetto

    I’ve made my own version of this technique, maybe it could be interesting compare whith your.

    here the link: http://www.mendelspeck.it/

  • It looks great! Very useful, Thanks!

  • never realised that something so cool was so simple =D

  • nice tutorial

  • nice tricks. i’ll use it, thank’s.

  • Making a website with CSS is extremely important if you want a clear and good looking design , and of course a clean coding.

  • Coltrane

    Good stuff Soh – Any fixes for the firefox bugs yet?

  • Very nice tutorial …thanks

  • very very useful.. thnkx

  • small yet very much effective tutorial .. thanks

  • Great Tutorial, just what I need for my latest site! I am having issues however when the screen resolution is small enough to allow you to scroll horizontally. The sticky nav overlaps the content to the right of it. Do you know how to stop the sticky nav from moving across horizontally?

  • nice tutorial but im looking other sticky sidenav.. πŸ™‚

  • Nils

    Does not work in iPad

  • Incredible ! Loved the way you treated IE 6.

    Thanks !

  • 3

    I am a newbie to CSS and have tried adding a fixed sidebar which seems to be working ok in Firefox. However, when testing the site in different browser using http://browsershots.org, in some cases it looks like I have duplicated the sidebar twice?!:

    http://browsershots.org/http://www.3mobileuk.co.uk/

    I have added:

    #wrap {
    position: relative;
    width: 820px;
    margin : 0px auto;
    }
    #secondary {
    position : fixed;
    top : 10px;
    left : 50%;

    padding-left : 110px;
    }

    #content {
    width : 820px;
    }

  • Great Information!

    We’ve been brushing up on CSS, very timely, indeed.

    Thanks for the post

  • can someone please help me?
    i don’t know how to get my sidebar fixed..!!
    please please heeelp! πŸ™‚
    xx

  • Well tutorialized !

Privacy Policy | Contact