3 column layout - footer

HTML & CSS
1

Please please please can someone help me.

I’ve been tweaking this every night for weeks and I’m so far gone that I cannot see the prblem now

I’ve read Paul’s post in the FAQ’s and have been following http://www.pmob.co.uk/temp/3colfixedtest_explained.htm but cannot get the footer to stay at the bottom

I must ave read a hundred tutorials and now have no idea what the best approach is

All I want is column each side (where I can put a full size image (not a repeating one). a centre column and a footer that sticks to the bottom of the page!

Is this really that hard? Is there anything anyone can please help with. I’m at the end of my tether

html, body {height:100%}
body {
padding:0;
margin:0;
background:pink url(leftcolbg.jpg) repeat-y left top;

}

#outer{
min-height:100%;
margin-left:130px;
margin-right:130px;
background: white;

margin-bottom:-52px;

}
html #outer{height:100%;} /* IE6 and under treat height as min-height anyway*/

padding:0;
margin:0;
background:#fff url(leftcolbg.jpg) repeat-y left top;

margin-left:130px;
margin-right:130px;

margin-bottom:-52px;

#header{
text-align:center;
position:relative;
margin:0 -131px;
padding-top:56px;
min-height:0;/* ie 7 haslayout fix */

}
/* mac hide \\*/
* html #header{height:56px;he\\ight:1px}/* height needed for ie to force layout*/
/* end hide*/

#left {
position:relative;/*ie needs this to show float */
width:130px;/* same as the left margin on #outer*/
float:left;
margin-left:-129px;/*must be 1px less than width otherwise won't push footer down in older mozilla*/
left:-2px;/* push column into position*/
}
#left p {padding-left:2px;padding-right:2px}
#right p {padding-left:2px;padding-right:2px}

#right {
position:relative;/*ie needs this to show float */
width:130px;/* same as right margin on #outer*/
float:right;
margin-right:-129px;/*must be 1px less than width otherwise won't push footer down in older mozilla*/
left:2px;/* push column into position*/
}

#footer {
width:100%;
clear:both;
height:50px;

text-align:center;
position:relative;
}
* html #footer {/*only ie gets this style*/
\\height:52px;/* for ie5 */
he\\ight:50px;/* for ie6 */
}

#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
* html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */

<div id="outer">
<div id="header"> <p>Header - Centre column longest - footer at bottom of document.</p></div>
<div id="left"><p>Left Content goes here : </p></div>
<div id="right"><p>Right content goes here : </p></div>
<div id="centrecontent"><p>Centre Content goes here

<br></br>
<br></br>


</p></div>
<div id="clearfooter"></div><!-- to clear footer -->
</div><!-- end outer div -->
<div id="footer"> -Footer -</div>
2

There are a few inconsistant things going on in your css. I see a few properties outside any id or class. Do you have a link to a page? That would make things easier

3

Thank you

I’ve uploaded it here:

http://www.togganet.co.uk/Rebrand/RB-index.html

4

I’ve read Paul’s post in the FAQ’

That’s a very old topic and these days you would be better with the new sticky footer technique mentioned in the FAQ that supports ie8+

Here’s a 3 col example:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- html5 shiv for IE8 and under -->
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
h1 {
	padding:10px;
	margin:0;
}
html, body, #wrap {
	margin:0;
	padding:0;
	height:100%;
}
#wrap {
	display:table;
	width:100%
}
.content { background:#ccc; }
.footer, .content { display:table-row }
.main, .sidebar { display:table-cell }
.sidebar {
	width:150px;
	background:#f9f9f9;
}
/* height 1px on the footer is the sticky footer technique */
/* don't worry it will expand to accomodate the content because that's what display:table does*/
.footer { height:1px; }
.footer {
	background:#999;
	color:#fff;
	text-align:center;
}
.footer p {
	margin:0;
	padding:10px
}
.main-foot { margin:0 -150px;/* match side column widths*/ }
.footer .sidebar { background:#999; }
</style>
</head>

<body>
<div id="wrap">
		<div class="content">
				<div class="sidebar">Sidebar content here</div>
				<div class="main">
						<h1>Fluid Height Sticky footer simple - IE8+ (no hacks )</h1>
				</div>
				<div class="sidebar">Sidebar content here</div>
		</div>
		<div class="footer">
				<div class="sidebar">&nbsp;</div>
				<div class="main-foot">
						<p>Sticky footer</p>
				</div>
				<div class="sidebar">&nbsp;</div>
		</div>
</div>
</body>
</html>

If you need to support IE7 and below then it gets complicated and you would need to use conditional comments to provide alternative floated columns instead but you will lose the equalising effect.

5

Thanks Paul

I’ll have a play tonight.

This has been driving me crazy :slight_smile:

6

This has worked swimmingly

I can’t describe how happy I am

Thanks so much!