• 0

[Footer] position: absolute


Question

Hi,

I'm trying my first layout with a footer positioned at the absolute bottom of the page, but I've run into an obvious issue - once the page gets tall enough sooner or later you'll need to scroll down, but the footer is fixed in position so it just remains where the bottom of the viewport was when the page was first opened.

How would I get around this? Some javascript?

Here are snippets of the code in question.... think it's enough!

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">
	<head>	
		<title>...</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />

		<style type="text/css" media="screen, projection">
		@import url('layout/stylesheet.css')
		</style>
	</head>
<body>

<div id="container">

	<header>
		<h3 title="..."> </h3>
			<nav>

			</nav>

	</header>

	<aside>
		<h3 title="...">...</h3>
			<ul>
				<li><span title="..."></span>...</li>
			</ul>


	</aside>

	<div id="wrapper">
        ...
	</div>

	<footer>
		<p id="copyright">
		© 
		</p>
	</footer>
</div>
</body>
</html>

CSS

html, body
	{
		margin: 0;
		font: 1.0em 'Helvetica Neue', Helvetica, Tahoma, Sans-serif;
		height: 100%;
		min-width: 850px;
		color: #222;
		background-color: #fff;
		cursor: default
	}

div#container
	{
		position: relative;
		min-height: 100%
	}

div#wrapper
	{
		display: block;
		color: #111;
		background-color: #fff;
		padding: 20px;
		width: 72.5%
	}

footer
	{
		position: absolute;
		bottom: 0;
		display: block;
		width: 100%;
		background-color: #333;
		color: #fff;
		text-shadow: 1px 1px 0 #111;
		padding: 15px 0 15px 0
	}

aside // sidebar
	{
		float: right;
		height: 100%;
		line-height: 120%;
		font-size: 0.9em;
		border-left: 1px solid #dadada;
		padding: 0 5px 0 5px;
		display: block;
		width: 200px;
		background-color: #f6f6f6;
		color: #444;
	}

... Yesss and it is grey and grey. :alien:

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

Ohh good catch plasmarox! Actually, they're not even semantic--they will produce parsing errors when you try to validate the CSS.

Awesome! Shame that one can't use them, though.

Footer is not a HTML element. You must make a div with footer as an ID and change the CSS accordingly.

Link to comment
Share on other sites

  • 0

I saw your original post, plasmarox, before you edited it.. While I'm not sure his footer missing an ID (to correlate with his HTML) is actually incorrect.. footer {} alone is correct IF you are utilizing HTML5 for <footer>.

Link to comment
Share on other sites

  • 0

Huh? I'm not using identifiers because I don't need them for most cases.

I'm using HTML5, where footer is an element. No div required.

http://www.w3schools...5_reference.asp

I saw your original post, plasmarox, before you edited it.. While I'm not sure his footer missing an ID (to correlate with his HTML) is actually incorrect.. footer {} alone is correct IF you are utilizing HTML5 for <footer>.

Pah, typical. It was live for seconds before i realised the mistake I made. :shiftyninja:

Fair enough, I hadn't checked a HTML5 list - my bad for checking html4.

*reads more*

Link to comment
Share on other sites

  • 0

I'm stupid. I just removed all the position attributes and used float: left to fix it.

It's perfect now.

...... :pinch:

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.