Web Design Forum: Sticky Footer with Above Divs - Web Design Forum

Jump to content

WDF
WDF Premium Memberships Reseller Hosting
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Sticky Footer with Above Divs Wordpress Theme trouble

#1 User is offline   DizzyDoo 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 2
  • Joined: 12-April 09
  • Reputation: 0
  • Experience:Intermediate
  • Area of Expertise:Designer

Posted 12 April 2009 - 06:41 PM

Afternoon,

Having a bit of trouble with my website. If you visit: http://cranktrain.com/cssTest3/ you can see the problem.

The footer is one that, when the content is vertically greater than the browser screen, the footer is at the end of the page. When the content is vertically less than the browser screen, the footer is stuck to the bottom of the browser.

So far the sticking to the bottom of the screen works, but when my sidebar div is filled with nonsense, the footer does not jump to the bottom of the page, rather, it annoyingly overlaps it.

Any decent solutions are muchly appreciated.

HTML: (Please ignore the huge load of nonsense, that's just to stretch the sidebar)

<!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" xml:lang="en">
	<head>

		<title>Cranktrain</title>

		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

	</head>
	<body>

		<div class="wrapper">
			<div class="header">
				<div id="headerContent">
					<div id="menu">
						blog  |  games  |  about
					</div>
					<div id="logo">
						<img src="images/cranklogo.png" id="logo" width="285" height="136" alt="Matt Luard's site of everything." />
					</div>
				</div>
			</div>

			<div id="mainContent">
				 <div id="posts">
  
		<div class="rbroundbox">
	<div class="rbtop"><div></div></div>
		<div class="rbcontent">
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
		</div><!-- /rbcontent -->
	<div class="rbbot"><div></div></div>
</div><!-- /rbroundbox -->

</div>
	<div id="sidebar">
	
			<div class="rbroundbox">
	<div class="rbtop"><div></div></div>
		<div class="rbcontent">
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
			<p>Lorem ipsum dolor sit amet, 
			consectetuer adipiscing elit. Duis 
			ornare ultricies libero. Donec 
			fringilla, eros at dapibus fermentum,
			tellus tellus auctor erat, vitae porta 
			magna libero sed libero. Mauris sed leo. 
			Aliquam aliquam. Maecenas vestibulum.</p>
		</div><!-- /rbcontent -->
	<div class="rbbot"><div></div></div>
</div><!-- /rbroundbox -->

	</div>
  </div>
</div>
			</div>

			<div class="push"></div>

		</div>

		<div class="footer">
			<p>Footer</p>
		</div>
	</body>
</html>


CSS:
* {
	margin: 0;
}
html, body {
	height: 100%;
	background-color:#a8a89c;
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
	height: 142px; /* .push must be the same height as .footer */
}


body {
	text-align: center;
}
.wrapper {
	position: relative;
	width: 100%;
	font-size: 0.9em;
	margin: 0 auto -104px;
	text-align: center;
}
.header {
	height: 114px;
	text-align:center;
	background: url(images/headerBack.png);
}

#headerContent{
	margin: 0 auto;
	width:1000px;
	color:#64665f;
	text-align:left;
	font: Helvetica, Arial, sans-serif;
	font-size:17px;
	padding-top:0px;
}

#menu{
	width: 715px;
	float: left;
	padding-top:80px;
}

#logo{
	float: left;
	padding-top: 6px;
}

#mainContent{
	position:absolute;
	padding-top:38px;
	width:1000px;

	text-align: center;
}

h1 {
	text-indent: -500em;
}
h2 {
	padding: 0 0 0.6em;
	color: #d00;
	font: 1.4em helvetica,arial,sans-serif;
	text-shadow: #ddd 1px 1px 2px;
}
p {
	padding: 0 0 1em;
	color: #666;
	font: 1em/1.4em arial,sans-serif;
}
a {
	color: #000;
	text-decoration: none;
	border-bottom: 2px solid #0bf;
}
a:hover {
	color: #0bf;
}
strong {
	font-weight: normal;
}
.download {
	position: absolute;
	right: 0;
	top: 160px;
}
.footer {
	position: relative;
	width: 100%;
	height: 104px;
	margin: 0 auto;
	background: url(images/footerBack.png);
}
.footer a {
	color: #fff;
	text-decoration: underline;
	border: 0;
}
.footer p {
	position: absolute;
	left: 0;
	bottom: 4px;
	width: 1000px;
	padding: 0;
	color: #fff;
	font: 0.8em arial,sans-serif;
	text-align: center;
}

#posts
{
	width: 590px;
	float:left;
	margin:0 auto;
	padding-right: 10px;
}

#sidebar
{
	width: 400px;
	float: left;
	margin:0 auto;
}


.rbroundbox
{
	background: url(images/nt.gif) repeat;
}
.rbtop div { background: url(images/tl.gif) no-repeat top left; }
.rbtop { background: url(images/tr.gif) no-repeat top right; }
.rbbot div { background: url(images/bl.gif) no-repeat bottom left; }
.rbbot { background: url(images/br.gif) no-repeat bottom right; }

/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
	width: 100%;
	height: 7px;
	font-size: 1px;
}
.rbcontent { margin: 0 7px;  }
.rbroundbox { width: 100%; height:100%; margin: 1em auto; }

0

#2 User is offline   craftedpixelz 

  • Expert
  • PipPipPipPip
  • Group: Members
  • Posts: 644
  • Joined: 28-June 08
  • Reputation: 5
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Web Guru
  • Area of Expertise:Web Designer

Posted 12 April 2009 - 07:02 PM

Have you tried the sticky footer solution by cssstickyfooter.com? It's always worked flawlessly for me.
0

#3 User is offline   DizzyDoo 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 2
  • Joined: 12-April 09
  • Reputation: 0
  • Experience:Intermediate
  • Area of Expertise:Designer

Posted 12 April 2009 - 08:02 PM

Thank you, I'm rebuilding the page with that guide. Only problem is, if you take a look at it now, the footer is not flush with the sides like the header is. The footer (as per the guide) is on position:relative; but the header is on position:absolute;.

How can I achieve the flush effect with that position setting for the footer?
0

#4 User is offline   craftedpixelz 

  • Expert
  • PipPipPipPip
  • Group: Members
  • Posts: 644
  • Joined: 28-June 08
  • Reputation: 5
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Web Guru
  • Area of Expertise:Web Designer

Posted 12 April 2009 - 09:59 PM

Add: 

body {
   margin:0;
   padding:0;
}


within your stylesheet. That way you shouldn't need to add absolute positioning on your header and it should fix your problem.

You will also need to change this line: 'margin-top: -110px; /* negative value of footer height */' to be the same height as your footer, i.e. 104px. Otherwise your footer won't sit at the very bottom of the browser window.

I've just tested this out on your site in Firebug and it looked just fine.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users