[SOLVED] Basline footer

rarebit · October 24, 2008

Hi,

I'm after a footer which when the content has less height than the overall page it sticks to the baseline, however if there is more than a page worth of content for it to be pushed down with it. This should hopefully demonstrate the issue:

<html>
<head>
<title>TEST</title>
<style type="text/css" media="all">
html {
margin: 0px;
padding: 0px;
}
body {
background: #ffffff;
color:#efefef;
font-family: arial,helvetica,geneva,sans-serif;
font-size: 14px;
margin: 0px;
padding: 0px;
}
#content_wrap {
width: 640px;
height: 100%;
background: #efefef;
margin: 0 auto;
}
#content_header {
width: 640px;
height: 50px;
background: #ff0000;
}
#content_main {
width: 400px;
background: #00ff00;
float: left;
}
#content_menu {
width: 240px;
background: #0000ff;
float: left;
}
#content_footer {
width: 640px;
height: 50px;
background: #ffff00;
clear: both;
position: absolute;
bottom: 0px;
}
</style>
</head>
<body>
<div id='content_wrap'>
<div id='content_header'>header</div>
<div id='content_main'>main<br>
	text<br>text<br>text<br>text<br>text<br>text<br>text<br>
	text<br>text<br>text<br>text<br>text<br>text<br>text<br>
	text<br>text<br>text<br>text<br>text<br>text<br>text<br>
	text<br>text<br>text<br>text<br>text<br>text<br>text<br>
	text<br>text<br>text<br>text<br>text<br>text<br>text<br>
	text<br>text<br>text<br>text<br>text<br>text<br>text<br>
	</div>
<div id='content_menu'>menu</div>
<div id='content_footer'>footer</div>
</div>
</body>
</html>

Cheers...

BoltZ · October 24, 2008

Ah If i had a nickel for everytime someone does this.

You had position:absolute at the footer which mean if more content was added the footer would stick in place. You should not use so much position absolutes. I removed the position absolute from #content_footer and it worked exactly like you wanted it to.

Cheers

p.s. Add an xhtml transitional doctype. If you don't know it try googling it

rarebit · October 24, 2008

No!

If you remove the 'text' fill (i.e. no content) then the footer doesn't stick to the baseline. I'm not wanting to to use 'min-height' either. I've found an example earlier which works, but when I recreate it, it doesn't. I'll have another crack tomorrow and report back... It uses some hidden block content filler or something.

BoltZ · October 24, 2008

Wait..you said you want if more content is added that the footer will stick underneath the content id's right? If you just use this code here then no matter what or how much content you have in there the footer will always be below the contents.

Sorry if this is not what you wanted but it sure sounds like it is.

<html>
<head>
<title>TEST</title>
<style type="text/css" media="all">
html {
   margin: 0px;
   padding: 0px;
}
body {
   background: #ffffff;
   color:#efefef;
   font-family: arial,helvetica,geneva,sans-serif;
   font-size: 14px;
   margin: 0px;
   padding: 0px;
}
#content_wrap {
   width: 640px;
   height: 100%;
   background: #efefef;
   margin: 0 auto;
}
#content_header {
   width: 640px;
   height: 50px;
   background: #ff0000;
}
#content_main {
   width: 400px;
   background: #00ff00;
   float: left;
}
#content_menu {
   width: 240px;
   background: #0000ff;
   float: left;
}
#content_footer {
   width: 640px;
   height: 50px;
   background: #ffff00;
   clear: both;
   bottom: 0px;
}
</style>
</head>
<body>
<div id='content_wrap'>
   <div id='content_header'>header</div>
   <div id='content_main'>main<br>
      text<br>text<br>text<br>text<br>text<br>text<br>text<br>
      text<br>text<br>text<br>text<br>text<br>text<br>text<br>
      text<br>text<br>text<br>text<br>text<br>text<br>text<br>
      text<br>text<br>text<br>text<br>text<br>text<br>text<br>
      text<br>text<br>text<br>text<br>text<br>text<br>text<br>
      text<br>text<br>text<br>text<br>text<br>text<br>text<br>
      </div>
   <div id='content_menu'>menu</div>
   <div id='content_footer'>footer</div>
</div>
</body>
</html>

rarebit · October 24, 2008

Thats half of it, but when empty the footer is to goes no higher than the baseline. See the last two examples here, http://www.themaninblue.com/experiment/footerStickAlt/

I'm not meaning to be off, but it's been a very long day and last time I started a similar post I was given this same solution, but many thanks anyway.

rarebit · October 24, 2008

OK, earlier I used the source from the example, just now i've used the actual tutorial and wahey, here we go:

<html>
<head>
<title>TEST</title>
<style type="text/css" media="all">
html, body
{
margin: 0px;
padding: 0px;
height: 100%;
}
#nonFooter
{
position: relative;
min-height: 100%;
}
* html #nonFooter
{
height: 100%;
}
#content
{
padding-bottom: 110px;
}
#footer
{
background-color: #efefef;
position: relative;
margin-top: -100px;
height: 100px;
}
</style>
</head>
<body>
<div id="nonFooter">
<div id="content">
	content<br>
	<!--text<br>text<br>text<br>text<br>text<br>text<br>text<br>
	text<br>text<br>text<br>text<br>text<br>text<br>text<br>
	text<br>text<br>text<br>text<br>text<br>text<br>text<br>
	text<br>text<br>text<br>text<br>text<br>text<br>text<br>
	text<br>text<br>text<br>text<br>text<br>text<br>text<br>
	text<br>text<br>text<br>text<br>text<br>text<br>text<br>-->
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>

Cheers again Boltz

BoltZ · October 24, 2008

What are you asking me to do with the code?

rarebit · October 25, 2008

nowt! all done for this test! merci...

Sign In

[SOLVED] Basline footer

Recommended Posts

rarebit

Link to comment

Share on other sites

BoltZ

Link to comment

Share on other sites

rarebit

Link to comment

Share on other sites

BoltZ

Link to comment

Share on other sites

rarebit

Link to comment

Share on other sites

rarebit

Link to comment

Share on other sites

BoltZ

Link to comment

Share on other sites

rarebit

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information