two and three column CSS layout with header and footer
November 25, 2007
[note:] this post has been plagiarized by an anonymous blogger who appears to live somewhere in a former soviet country. I hope he feels badly about his decision to do such a thing, and will eventually come to know that deep linking content form my site makes him a nasty boy.
Are you being served by your web page layout? I think we all want more out of life than the typical Grace Bros. experience and CSS can certainly offer us more.
I’ve been trying to work out a simple 2 and 3 column layout with CSS with a header (easy) and a footer (not so easy) that always rests at the bottom of the page’s content (not the page’s window on load).
After a few hours of reading and trying many solutions that I found on message boards and web sites ( none of which worked for me ), I finally worked out a solution that I’m pleased with.
Note:
I’m re-leaning CSS for a web design course. Our textbook is Head First HTML with CSS & XHTML, which I really like – but the CSS chapter did not solve this problem for me.
One thing the authors neglected to cover was browser window height in relation to amount of content in your page’s body. All of their examples assumed the content would fit neatly on a browser window without forcing the user to scroll down. (they did cover resizing the browser window – but only discussed resizing the width – not the height.) and, as I said, the content on their example page always fit neatly on the browser window.
The first problem that I noticed was that by their methods, the footer would (at best) position itself at the bottom of the browser window when the page initially loads. but that was not a sticky footer ( in my attempts to implement the ideas in the book, the footer would “ride up with wear” , as Mr. Humphries would say. ) and they didn’t cover making the content area scrollable to fix that.
One more note:
The book – and virtually every site I could find discussed having #wrapper <div>s. I took that a bit further and created a second #wrapper just for the #footer: #sock.
Milage may vary:
I’m no expert. This worked for me and I like the results (using Firefox). Experiment, tweak, or disregard at your leisure.
Solution:
#############
2 – column layout
#############
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><!– TWO COLUMN LAYOUT EXAMPLE –>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<link type=”text/css” rel=”stylesheet” href=”2-or-3col.css” />
<title>TWO COLUMN LAYOUT EXAMPLE</title>
</head>
<body>
<div id="wrapper"><div id=”header“>
HEADER HEADER HEADER
</div><div id=”two_col_content“>
from <a href=”http://en.wikipedia.org/wiki/Blah”>wikipedia</a>:
In English, blah is a word that is sometimes used as an expression for words or feelings where the specifics are not considered important to the speaker or writer. It is not often seen in formal writing, except when transcribing speech. It differs from a speech disfluency such as “um” or “er” in that blah is a word used deliberately to represent other words, rather than as an accidental or temporary interjection into speech. Blah is also used when the speaker cannot say what was intended. “Blah” is also mimed behind people’s backs to suggest that they talk too much or that they talk about useless topics for no reason.<br>
<br>You can add content till the cows come home, the footer will always position correctly
</div> <!– end of content div –>
<div id=”sidebar“>
SIDE BAR <br>
this is a 2 column CSS layout with header and footer.
<br>
<br>
<a href=”http://hobbylobby.wordpress.com/”>visit hobbylobby</a>
<br>
<br>
</div> <!– end of sidebar div –>
</div> <!–end of wrapper div –><!–begin the footer content —————————————————————>
<div class=”clear“>
<!– crucial for forcing the footer to the bottom of the web page content –>
</div> <!–end of the clear div –><div id=”sock“>
<!– re-wrap the footer to force it to adhere to the jello rules
which govern overall width and centering on the page that controls
the rest of the page above.
–><div id=”footer“>
FOOTER FOOTER FOOTER
</div> <!– end of the footer div –></div> <!– end of the sock div –>
</body>
</html>
#############
3 – column layout
#############
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><!– THREE COLUMN LAYOUT EXAMPLE –>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<link type=”text/css” rel=”stylesheet” href=”2-or-3-col.css” />
<title>THREE COLUMN LAYOUT EXAMPLE</title></head>
<body>
<div id=”wrapper“>
<div id=”header“>
HEADER HEADER HEADER
</div><div id=”left_sidebar“>
LEFT SIDE BAR <br>
this is a 3 column CSS layout with header and footer.
<br>
<br>
<a href=”http://hobbylobby.wordpress.com/”>I wrote about this on my blog</a>
<br>
<br>
<a href=”twocolcss.html”>see the 2-col example</a><br>
<br>
this column has a lot of content and can be used for many things.</div> <!– end of left sidebar div –>
<div id=”right_sidebar“>
RIGHT SIDE BAR <br>
<br>
“The Yada Yada” is the 153rd episode of the sitcom Seinfeld. The 19th episode of the 8th season, it aired on April 24, 1997.George’s girlfriend is big on using the phrase “yada yada yada.” Jerry says that at least she is succinct, and it’s like “dating the USA Today.” Jerry’s dentist, Tim, has converted to Judaism, and is already making jokes that make Jerry uncomfortable. Jerry goes so far as to say that he only became Jewish for the jokes. Kramer and Mickey Abbott double-date, but they can’t decide which woman is right for them. Elaine is a character reference for a couple who are trying to adopt, but the story she tells during an interview destroys all hope of adoption.
</div> <!– end of right sidebar div –>
<div id=”three_col_content“>
“Blah” is a token word with no meaning of its own, usually used to illustrate generic, boring speech. It may be used to fill in blank space, or to replace another word or phrase. It’s for this last purpose that blah is sometimes assumed to mean something negative because it is used to replace a word that may be unpleasant, but blah itself is neutral. If spoken aloud the tone can usually be used to determine the speaker’s intent.
</div> <!– end of content div –>
</div> <!–end of wrapper div –>
<div class=”clear“>
<!– crucial for forcing the footer to the bottom of the web page content –>
</div> <!–end of the clear div –>
<div id=”sock“>
<!– re-wrap the footer to force it to adhear to the jello rules
which govern overall width and centering on the page that controls
the rest of the page above.
–>
<div id=”footer“>
FOOTER FOOTER FOOTER
</div> <!–end of the footer div –>
</div> <!–end of the sock div –></body>
</html>
#############
CSS
#############/* two column layout with header and footer CSS
by http://hobbylobby.wordpress.com/
*/html, body {
/*
to be used with both 2 and 3 col layouts
*/
height: auto;
font-family: sans-serif;
font-size: 100%;
margin: 0px;
}div#wrapper {
/*
to be used with both 2 and 3 col layouts
*/
width: 900px;
height: auto;
margin-left: auto;
margin-right: auto;
}div#header {
/*
to be used with both 2 and 3 col layouts
*/
position: relative;
left: 0;
top: 10px;
width: 100%;
height: 5%;
color: #C9E2E9;
padding: 13px 13px 13px 13px;
border-style: dashed;
border-color: #C9E2E9;
border-width: thick;
}div#sidebar {
/*
for use with the 2-col layout – the left sidebar
*/
position: relative;
margin-right: 10px;
top: 20px;
left: 5%;
width: 25%;
color: #A25F08;
border-width: 3px;
padding: 13px 13px 13px 13px;
border-style: dashed;
border-color: #C9E2E9;
border-width: thick;
}div#two_col_content {
/*
for use with the 2-col layout – the main content area
*/
position: relative;
float: right;
top: 20px;
left: 20%;
width: 55%;
margin-right: 23%;
color: #A25F08;
border-width: 3px;
padding: 13px 13px 13px 13px;
border-style: dashed;
border-color: #A25F08;
border-width: thick;
}/* footer tools folow ———————————————–*/
.clear {
line-height: 0px;
font-size: 0px;
clear: both;
height: 0px;
}div#sock {
width: 900px;
height: auto;
margin-left: auto;
margin-right: auto;
position: relative;
/* the only difference between the #wrapper and the #sock is
that the sock is positioned relative */
}div#footer {
/* for this to work, the footer -must- be wrapped inside the #sock
–and– come after the .clear div */
position: relative;
top: 30px;
bottom: 10px;
height: 5%;
left: 0px;
width: 100%;
color: #C9E2E9;
padding-top: 5px;
margin-left: 5px;
padding: 13px 13px 13px 13px;
border-style: dashed;
border-color: #C9E2E9;
border-width: thick;
}/* end of footer tools ———————————————-*/
/* start of the three column definitions —————————-*/
div#left_sidebar {
position: relative;
float: left;
top: 20px;
left: 3%;
width: 25%;
color: #A25F08;
margin-right: 10px;
padding: 13px 13px 13px 13px;
border-style: dashed;
border-color: #C9E2E9;
border-width: thick;
}div#right_sidebar {
position: relative;
float: right;
top: 20px;
margin-left: 10px;
width: 25%;
color: #A25F08;
padding: 13px 13px 13px 13px;
border-style: dashed;
border-color: #C9E2E9;
border-width: thick;
}div#three_col_content {
/*
use when the content area is being displayed
with the left_sidebar and the right_sidebar
*/
margin-right: 31%;
margin-left: 33%;
margin-top: 20px;
width: 33%;
color: #A25F08;
padding: 13px 13px 13px 13px;
border-style: dashed;
border-color: #A25F08;
border-width: thick;
}
November 26, 2007 at 8:42 pm
[...] just discovered that my post from yesterday about multi-columns with CSS was stolen – (every word, image, link, and letter) … with all content deep linked to my site [...]
December 1, 2007 at 8:21 pm
[...] I tinker, things could likely start to look really wonky here at [...]
July 17, 2009 at 6:37 pm
It isn’t working for me! I don’t know why
I’ve tried to use the three column version, and yet something’s stopping it from making three columns.
Thanks for the code, btw! Sorry there’s a silly person stealing it…