[css-d] Two-column layout with sticky footer.
Okay, I swear I've done this a thousand times, and seen it ten thousand, but I've having problems with a straightforward layout problem. I'm wondering if anyone has a similar layout laying around... I'm looking for a two-column layout. The left (#nav) column should be fixed width and the right (#main) one fluid. I'd like to have a footer that sticks to the bottom of the viewport or the bottom of the document, whichever is lower. And I'd like the main content to come before the nav in the source. I can even live without the sticky footer as long as it's below both columns (either of which could be longer.) This shouldn't be hard, right? -- Scott __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two-column layout with sticky footer.
Scott Sauyet schrieb: Okay, I swear I've done this a thousand times, and seen it ten thousand, but I've having problems with a straightforward layout problem. I'm wondering if anyone has a similar layout laying around... I'm looking for a two-column layout. The left (#nav) column should be fixed width and the right (#main) one fluid. I'd like to have a footer that sticks to the bottom of the viewport or the bottom of the document, whichever is lower. And I'd like the main content to come before the nav in the source. I can even live without the sticky footer as long as it's below both columns (either of which could be longer.) This shouldn't be hard, right? -- Scott __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ Maybe this helps: http://www.satzansatz.de/cssd/companions.html Not sure about your demands of letting the content come first though... Regards, Christian Kirchhoff *Directmedia Publishing GmbH* · Möckernstraße 68 · 10965 Berlin www.digitale-bibliothek.de AG Berlin-Charlottenburg · HR B 58002 · USt.Id. DE173211737 Geschäftsführer: Ralf Szymanski · Erwin Jurschitza __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two-column layout with sticky footer.
Scott Sauyet wrote: I'm looking for a two-column layout. The left (#nav) column should be fixed width and the right (#main) one fluid. I'd like to have a footer that sticks to the bottom of the viewport or the bottom of the document, whichever is lower. And I'd like the main content to come before the nav in the source. -- Scott In addition to what has already been suggested, you might try: Any two column content first source order layout of your choice on this page: http://blog.html.it/layoutgala/ with a faux-column: http://www.alistapart.com/articles/fauxcolumns/ and a footerStickAlt: http://www.themaninblue.com/writing/perspective/2005/08/29/ Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two-column layout with sticky footer.
Wow. Sorry Scott - you'll be getting this twice! I keep forgetting when I hit reply to this list, it only replies to the original person - not the whole list. I wanted to re-send because I thought this might help someone else looking for the same thing - otherwise I wouldn't bother. I just did this *exact* layout for a client the day before yesterday. You can get the vanilla version here: http://brassblogs.com/templates/2col.stickyfoot.leftsidebar/ I also have a right-sidebar version. (I think I have a 3-column version too...somewhere...hmm...where'd I put that...) ~Shelly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two-column layout with sticky footer.
[EMAIL PROTECTED] wrote: I wanted to re-send because I thought this might help someone else looking for the same thing - otherwise I wouldn't bother. I just did this *exact* layout for a client the day before yesterday. You can get the vanilla version here: http://brassblogs.com/templates/2col.stickyfoot.leftsidebar/ This is pretty close to what I'm looking for. The only thing I see missing is that the main column is supposed to be fluid. I might play around with altering it. Thanks for your help, -- Scott __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two-column layout with sticky footer.
David Laakso wrote: Scott Sauyet wrote: I'm looking for a two-column layout. The left (#nav) column should be fixed width and the right (#main) one fluid. I'd like to have a footer that sticks to the bottom of the viewport or the bottom of the document, whichever is lower. And I'd like the main content to come before the nav in the source. In addition to what has already been suggested, you might try: Any two column content first source order layout of your choice on this page: http://blog.html.it/layoutgala/ I'd seen that before, but hadn't bookmarked it. I think Layout 24 might do what I need. Thanks. with a faux-column: http://www.alistapart.com/articles/fauxcolumns/ I know the technique, but it's not needed for this project. and a footerStickAlt: http://www.themaninblue.com/writing/perspective/2005/08/29/ Yes, and there are others techniques at http://css-discuss.incutio.com/?page=FooterInfo including an ancient one of my own. Thanks for your help. -- Scott __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two-column layout with sticky footer.
http://brassblogs.com/templates/2col.stickyfoot.leftsidebar/ This is pretty close to what I'm looking for. The only thing I see missing is that the main column is supposed to be fluid. I might play around with altering it. Actually it's based off a fluid layout. If you remove the #wrapper, and the widths for header, footer and outer (and adjust #outer for the 100% height) the main column should become fluid at 100%. Alternatively, you could just set #wrapper, #footer, #header and #outer at 100% width, and you're set. ~Shelly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
