Here is another 3 columns Liquid Layout.
I have gathered the skills of different web designers to make my own script. This script is a little bit different from what you can find around there. I was looking for a 3 columns layout but I didn’t want to have a liquid layout for the three columns, only for the content. I didn’t want to make a mess inside my sidebars and needed to have fixed widths. Besides, I needed a sticky footer and equal height columns (Yeah! I know what you think: “He wants everything this guy!”).
Anyway, after mixing different techniques, I could finally get what I wanted. And best of all, I decided to release it to you guys for free. See the Demo.
And here’s the code (simplified):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <title>:::Web-Kreation::: Liquid Layout</title> <!-- We start the CSS--> <style type="text/css"> * { margin: 0; padding: 0; } html, body { border:0; margin:0; padding:0; height: 100%; } body { font: 100%/1.25 arial, helvetica, sans-serif; min-width: 780px; } p { margin: 15px 0; } p, h1, h2, h3, h4, h5, h6 { padding: 0 1em; } /* Important! Give padding to the text. You could give some padding from leftbar, rightbar and Content but it would not render properly in IE*/ /*****header*****/ #header { width: 100%; font-size: 1em; color: white; text-align: center; margin: 0; padding: 0; height: 60px; background-color: #494949; } /*****content*****/ #wrapper { min-width: 960px; padding:0; margin:0; position: relative; min-height: 100%; /* For Modern Browsers */ height: auto !important; /* For Modern Browsers */ height: 100%; /* For IE */ } #InnerWrapper { width: 100%; padding-bottom: 1px; } #WrapContent { padding-bottom: 58px; width: 100%; margin: 0; } #WrapContent:after { /* !important. stick the footer at the bottom*/ clear: both; display: block; content: "."; height: 0; visibility: hidden; } #leftbar { z-index: 2; float: left; width: 200px; margin: 0; padding: 10px 0; background-color: #ffcccc; } #rightbar { z-index: 5; float: right; width: 200px; margin: 0; padding: 10px 0; background-color: #99ff99; } #content { z-index: 0; display: block; width: auto; padding: 10px 0; text-align: left; margin: 0 200px 0 200px; background-color: #ffff99; } .clear { clear: both; display: block; height: 1px; overflow: hidden; margin: 0; padding: 0; } /*****footer*****/ #footer { position: absolute; bottom: 0 !important; bottom: -1px; /* For Certain IE widths */ clear:both; padding:0; margin:0; width: 100%; height: 58px; color: white; text-align: center; background-color: #494949; } </style> </head> <body> <div id="wrapper"> <div id="header">Top</div><!-- / Header --> <div id="InnerWrapper"> <div id="WrapContent"> <div id="leftbar"><p>Left sidebar</p></div> <div id="rightbar"><p>Right Sidebar</p></div> <div id="content"><p>Content</p></div> <div class="clear"></div> </div><!-- /wrapContent --> </div><!-- /innerwrapper --> <!-- Start Footer --> <div id="footer">Sticky Footer</div> </div><!-- /wrapper --> </body> </html> |
You are free to use this script. Do whatever you want with it but if you find some use of it drop me a message to let me know.
Popularity: 12% [?]
July 7th, 2007 at 8:32 am
Great post and very helpful. My html/css is a little rusty and have been looking for a good 3 column layout for my own website and this is perfect. Thanks, Michael
July 8th, 2007 at 6:00 am
Hello Jeeremie !
C’est là du code très très limpide ! J’ai presque assimilé à la première lecture (ça n’est pas rien. lol)
Merci pour ce post, qui donne vraiment envie (au profane que je suis) de mettre les mains à la pâte.
July 8th, 2007 at 6:12 am
Je suis content de savoir que mon code soit accessible à tous. Je me rappelle combien difficile c’était pour moi (à mes débuts en tant que designer amateur) et j’ai voulu, dans ce post, faire en sorte que n’importe qui puisse comprendre ce que je faisais. Si tu as des questions, n’hesites pas à me contacter. Ça sera un plaisir de t’aider.
A+
July 16th, 2008 at 2:23 am
I just want to point out that it is possible to have equal height columns without JavaScript providing you nest your divs correctly. Unfortunately this method is not compatible with a sticky footer.
February 28th, 2009 at 1:58 pm
How can i use ur hide/show login panel to this layout???
It Doesnt works for me… Can u help me out???
February 28th, 2009 at 2:20 pm
What doesn’t work exactly? The login form or the toggle effect (slide in/out)? If it is the login form, then it is normal. A login form needs a scripting language and a database (PHP/MySQL for example) in order to work.
Why don’t you use a CMS (Content Management System) such as Wordpress, Drupal, Silverstripe… Each include a login form by default. I wrote an article on how to Add a show/hide login panel to your Wordpress theme using Mootools. Wordpress is very powerfull CMS and I would highly recommend it.
March 5th, 2009 at 2:55 am
Thanks a lot. Amazing post does exactly what i have been looking for with just css and html. Just grabbed it from here, will report if I come across any issues.
Thanks once again! cheers
March 5th, 2009 at 5:04 am
Got one! any idea why can’t i center it with defined width. Like using margin:0 auto; for everything. I got it working for header and footer by adding a body dive inside.
March 5th, 2009 at 9:47 am
You can try to create a container to wrap #wrapper:
And then, add this to your stylesheet:
I didn’t try it in IE so maybe you will have to tweak the code a little bit.
February 12th, 2010 at 1:31 pm
Holy Smokes dude you have many wierd error codes on your web site that says parse error unexpected T String in line 18