Blog

You've reached the blog of Jeremie Tisseau, a French Visual Interface Designer, Wordpress & Drupal developer, graphic designer, web addicted... Oh! and I am based in Bangkok, Thailand, with my family.

Improve Images: Erase wrinkles in Photoshop

Tutorial: How to use EasyPHP?

Next/Previous Post

Skype Me!

Do you have any query? I am usually available so if the button is green, go ahead and ask me.

Hire Me!

I am currently available for Web/UI design projects. If you think we would work well together, contact me today to receive a free consultation.

Get in touch!

July 6, 2007

All, Freebies, HTML / CSS, Scripts, Tutorials

CSS 3 columns Liquid Layout (Fluid-Fix)

Article written by Jeeremie

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.

Preview

Check the demo:

View Demo

And here’s the code (simplified):

^?View Code HTML4STRICT

<!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, h2, 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.

The Author

Article written by Jeeremie:

Hi, My Name is Jeremie Tisseau. I am a French User Interface Designer & Front-End Developer based in Bangkok, Thailand, since January 2009. I design beautiful and functional designs for Web Based Applications and mobile devices.

Want to become a guest author on this blog?

Improve Images: Erase wrinkles in Photoshop

Tutorial: How to use EasyPHP?

Next/Previous Post Top ↑ ↓ Form

10 Comments

Michael says:

7 Jul, 2007

Reply

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
markeff says:

8 Jul, 2007

Reply

Hello Jeremie Tisseau !
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.
Jeremie Tisseau says:

8 Jul, 2007

Reply

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+
Matthew James Taylor says:

16 Jul, 2008

Reply

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.
Srikanth says:

28 Feb, 2009

Reply

How can i use ur hide/show login panel to this layout???
It Doesnt works for me… Can u help me out???
- Jeremie Tisseau says:
  
  28 Feb, 2009
  
  Reply
  
  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.
Ravi Kotak says:

5 Mar, 2009

Reply

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
Ravi Kotak says:

5 Mar, 2009

Reply

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.
Jeremie Tisseau says:

5 Mar, 2009

Reply
You can try to create a container to wrap #wrapper:

^?View Code HTML4STRICT
1 2 3 4 5 6 7
<body> <div id="container"> <div id="wrapper"> ... </div> </div> </body>
And then, add this to your stylesheet:

^?View Code CSS
1 2 3
#container { margin:0 40px; }
I didn’t try it in IE so maybe you will have to tweak the code a little bit.
Karen Atanacio says:

12 Feb, 2010

Reply

Holy Smokes dude you have many wierd error codes on your web site that says parse error unexpected T String in line 18