CSS 3 columns Liquid Layout (Fluid-Fix)

By Jeeremie. Posted in HTML / CSS, Tutorials

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

[-]^?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, 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: 17% [?]

4 Responses to “CSS 3 columns Liquid Layout (Fluid-Fix)”

1
Michael Says:
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
2
markeff Says:
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.
3
Jeeremie Says:
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+
4
Matthew James Taylor Says:
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.

About the Author

Subscribe via Email

Affiliates

CSS 3 columns Liquid Layout (Fluid-Fix)

Related posts

4 Responses to “CSS 3 columns Liquid Layout (Fluid-Fix)”

Leave a Reply