[SOLVED] Footer help

nashultz07 · #1 (**permalink**) Nov 26th, 2007, 23:21

I am not sure how to word this but here goes...

I have a footer that I want at the very bottom of the page even if the content of the page does not reach the full extent of the page.

Here is my code:

CSS:

Code: Select all

body {
margin: 0 auto;
padding: 0;
font: 76% Verdana,Tahoma,Arial,sans-serif;
background: #999999;
}
 
/*Header*/
#header {margin: 0 auto;
padding: 0;
background: #006600;
height: 75px;
width: 100%;
text-align: center;}
 
#header h3 {margin-top: 20px;}
 
/* Menu */
#menu {margin: 0;
padding: 0;
width: 100%;}
 
.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(black.gif) center center repeat-x;
}
 
.solidblockmenu li{
display: inline;
}
 
.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}
 
.solidblockmenu li a:visited{
color: white;
}
 
.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(red.gif) center center repeat-x;
}
 
<!--[if IE]>
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}
 
/*Content*/
#content {margin: auto;
padding: 0;
border-right: 1px solid #000;
border-left: 1px solid #000;
background: #ffffff;
width: 90%;
height: 100%;
position: relative;}
 
#leftcontent {margin: 5px 2.5px 5px 5px;
padding: 0;
background: #c0c0c0;
width: 55%;
height: auto;
float: left;}
 
#leftcontent div {margin: 5px;}
 
#rightcontent {margin: 5px 5px 5px 2.5px;
padding: 0;
background: #c0c0c0;
width: 43%;
height: auto;
float: right;}
#rightcontent div {margin: 5px;}
 
/*Footer*/
#footer {margin: 0 auto;
padding: 0;
background: #060;
height: 75px;
width: 100%;
text-align: center;
position: relative;}
 
#footer div {margin-top: 25px;}

HTML:

HTML: Select all

<body>
<div id="header"><h3>nashultz07 Web Designs</h3></div>
<div id="menu">
<ul class="solidblockmenu">
<li><a href="#" class="current">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<br style="clear: left" />
</div>
<div id="content" class="iepara">
<div id="leftcontent">
<div>Left Content</div>
</div>
<div id="rightcontent">
<div>Right Content</div>
</div>
</div>
<div id="menu">
<ul class="solidblockmenu">
</ul>
<br style="clear: left" />
</div>
<div id="footer">
<div>Copyright &copy; 2007&nbsp;&nbsp;Design by nashultz07</div>
</div>
</body>

Stuart · #2 (**permalink**) Nov 26th, 2007, 23:24

Well, first of all, get rid of this: <!--[if IE]> (in your css). That should not be there...

Second, the solution to this problem is to use Faux Columns.

Cheers

Lchad · #3 (**permalink**) Nov 26th, 2007, 23:45

I think you mean a sticky footer?
Here's a link to one. Haven't actually done one yet so can't help with the code.

Stuart · #4 (**permalink**) Nov 26th, 2007, 23:47

That's a good idea too... Look at both, you'll find what you need

nashultz07 · #5 (**permalink**) Nov 26th, 2007, 23:47

The Faux Columns doesn't work...so now ill try the sticky footer.

Also, thanks for the quick responses! You guys are awesome!

nashultz07 · #6 (**permalink**) Nov 27th, 2007, 00:29

The sticky footer did work; however, the site that you linked was confusing and also didn't work quite right. I googled sticky footers and found this site that worked wonders: http://ryanfait.com/sticky-footer/.

Thank you guys soo much!

Stuart · #7 (**permalink**) Nov 27th, 2007, 00:32

Guess who that site is from! Our very own Ryan Fait...

nashultz07 · #8 (**permalink**) Nov 27th, 2007, 01:01

That's who I thought it was, but I wasn't for sure.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
css for this footer	r0ck80y	Web Page Design	1	May 17th, 2008 13:54
[SOLVED] How to get my footer to stretch	Gav	Web Page Design	3	Dec 16th, 2007 14:15
[SOLVED] footer positioning	danny322	Web Page Design	3	Nov 12th, 2007 10:30
[SOLVED] misbehaving footer	mykl	Web Page Design	15	Oct 15th, 2007 19:20

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] Footer help