Member Avatar for isotope

Hi everybody,
I'm struggling with the hoary problem of filling a page with css, even when the content doesn't reach the end of it.
I've been digging through many posts, forum and mailing lists and found hundreds variations of the same few tricks, but didn't find an ultimate one.

Since I wanted to have a very minimal and clean structure I opted for the fake, though effective, solution of styling the html and body so that inner elements seem to get to the end of the page even when they're not.
Here you can find an example:
http://evoke.mapofemergence.com/restyle
Stylesheet here:
http://evoke.mapofemergence.com/restyle/style.css

As you can see the whole structure works pretty fine but I couldn't figure out how to deal with the footer element.
But when the page's content doesn't fill the window (ie. in the index), the footer's margin property isn't enough to have it stuck on the bottom of the page (the footer is the rectangle saying "evoke.mapofemergence is a project...").

At first, I tried giving it an "absolute" position which worked fine for the pages not filling the window.
Example here:
http://evoke.mapofemergence.com/restyle/index1.php
Stylesheet here:
http://evoke.mapofemergence.com/restyle/style1.css
But, with this solution, for longer pages (such as this one) the footer is drawn over the content and not pushed at the very bottom of the containing div.

I hope you can help me out, since I really can't figure out how to solve this.
Thanks for your time and kind attention,
Stefano

Edited by isotope because: n/a
  • 5 Contributors
  • 7 Replies
  • 119 Views
  • 6 Months Discussion Span
  • Latest Post Latest Post by Cool&Awesome
Member Avatar for diafol

how about position:fixed. This will keep the element static w.r.t while the page scrolls.

Member Avatar for isotope

Hi ardav,
thanks for replying but, actually, I was trying to do the opposite.

I would have the footer element at the bottom of the html page, if it's higher than the browser window, while it should be at the bottom of the window if the html if shorter.

In short I would obtain this and this with a same css, while at the moment I could achieve the desired result for each case, only with different css properties ("position:absolute" in one case, "margin" in the other one)

I it makes sense...
Stefano

how about position:fixed. This will keep the element static w.r.t while the page scrolls.

Member Avatar for diafol

Ah, OK. Have you tried position:relative? This should 'lock' it in place inside a container. If your element is within the footer (or similar 'div'), setting the position to relative *should* ensure that it stays put.

Member Avatar for colweb 
<!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>Sticky Footer</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<style type="text/css">
		* {margin: 0;}
		html, body {height: 100%;}
		/* the bottom margin is the negative value of the footer's height */
		.wrapper {background:#ccc;min-height: 100%;height: auto;height: 100%;width:500px;margin: 0 auto -142px;}
		/* .push must be the same height as .footer */
		.footer, .push {height: 142px;}
		.footer {background:#eee;width:500px;margin:0 auto;}
	</style>
</head>
<body>
	<div class="wrapper">
		<h1>Sticky Footer</h1>
		<p>Content goes here.</p>
		<div class="push"></div>
	</div>
	<div class="footer">
		<p>Footer goes here.</p>
	</div>
</body>
</html>

In the above code, the footer will be at the bottom of the browser window and if you add more content, the footer will still be at the bottom, but this time at the bottom of your content. As your can see, no need for position relative or absolute.

Edited by colweb because: n/a
Member Avatar for isotope

@colweb : Simple and elegant, definitely the solution I was looking for.

thanks a lot (and sorry for replying that late),
s

Member Avatar for drjohn

Sorry, but it crashes and burns when the content gets a bit long and then sits over the top of the footer which doesn't move downwards. Try adding 25 - 30 or so lines of fake content to see this. Number of lines depends on the size of your screen.

Crashed in Chrome, Firefox and IE.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.