• 0

CSS2 positionning help requested!


Question

I have this footer that I would like to be on the bottom of each page, using CSS2...

The problem is, when there is almost no content on the page, I want the footer to be at the bottom of the screen, not right below the last thing on the page.

In old HTML, this would translate to:

<table height="100%">
  <tr>
    <td height="20">This is 20 pixels high</td>
  </tr>
  <tr>
    <td>This is variable</td>
  </tr>
  <tr>
    <td height="30">This is a footer and it's 30 pixels high</td>
  </tr>
</table>

That way, the page is always filled completely (vertically), wheter or not there is enough content to normally fill it.

This is what I mean...

This is correct

Here you shouldn't have to scroll to see the footer

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Testing</title>
<link href="general.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div align="center">
<div id="container">

	<div id="orange"><img src="../images/transparent.gif" alt="" width="1" height="3" /></div>

	<div id="splash"></div>

	<div>
  <img src="images/bottom-menu.gif" width="600" height="32"><br> 
  <img src="images/transparent.gif" width="600" height="2"><br> <img src="images/bienvenue.gif" width="600" height="32">
	</div>

	<div id="content">
  <p>Bleh</p>
	</div>


</div>
<div style="position: absolute; bottom: 5px; left:38%; text-align:center">
<div id="bottomcontainer">

	<div id="xhtml"><a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="https://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"></a>
       <a href="http://validator.w3.org/check/referer"><img src="https://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1!" height="31" width="88" /></a></div>

	<div id="credits">© 2003 Guillaume H?bert</div>

	<div id="green"><img src="../images/transparent.gif" alt="" width="1" height="5" /></div>

</div>

<div id="menu"><a href="index.php"><img src="../images/acceuil-off.gif" alt="" width="73" height="33" /></a><a href="portfolio.php"><img src="../images/portfolio-off.gif" alt="" width="92" height="33" /></a><a href="prix.php"><img src="../images/prix-off.gif" alt="" width="48" height="33" /></a><a href="contacts.php"><img src="../images/contact-off.gif" alt="" width="93" height="33" /></a><img src="../images/transparent.gif" alt="" width="10" height="1" /></div>

</div>
</div>
</body>
</html>

Link to comment
Share on other sites

  • 0

well if you run at a higher res than 1024, it's probably not gonna work

but at 1024 on the second page, everything looks good, but you have to scroll down to see the footer... i want it to be at the bottom of the page, but not offscreen

Link to comment
Share on other sites

  • 0

Not possible per se in the current version of CSS as the Height attribute cannot be 100% (it's not a valid value anymore). I have seen some suggestions that setting the Top attribute to something like 100% or slightly less can, in some browsers, produce the desired result.

I suggest however that instead of trying to make a design that is strict in nature (rigid), make one that is fluid and uses the benefits of CSS to its advantage.

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.