13 replies [Last post]
jmbrink26
jmbrink26's picture
Offline
newbie
Salt Lake City, Utah
Last seen: 11 years 29 weeks ago
Salt Lake City, Utah
Timezone: GMT-6
Joined: 2010-03-21
Posts: 10
Points: 11

Hi,

I was wondering is someone could help me sort out this layout problem I have.

I have been using CSS and markup for 5 years now, and decided I'd finally figure out how to get a footer working.

Here is a screenshot of the application I am working on at the moment. http://justinbrinkerhoff.info/img/helpdesk_screenshot.png

I am trying to get a footer to show up at the bottom of the page. Every article I've read essentially all say the same thing; to use relative positioning, using a wraper div, place a div under the wrapper div to "clear", then the footer beneath that.

Something like:

#container {
  min-height: 100%;
  position: relative;
  margin-bottom: -50px; /* or whatever margin, I'm using 50 for my footer... */
}
#pushdown {
  clear: both;
  height: 50px;
}
 
#footer {
  position: relative;
  height: 50px;
}

But the problem is, both the footer, and my header end up with a margin of about 5px - 10px or so with whitespace surround it, when I use relative positioning, so I have to use absolute positioning.

And using fixed positioning doesn't work for me either, as the content is dynamic, being pulled from a MySQL database via Ruby.

So, my question is, what is the best way to go about this page layout?

In essence, my layout is like so:

The header has a static height, but the content div could be any height. It won't have more than a certain height in most cases though, due to pagination. But some pages will have no max height in the content div for things like articles.

Here is the markup and CSS. I stripped out all the Ruby code, as it would just be confusing.

The HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Student Help Portal</title>
 
</head>
<body>
 
 
      <div class="head">
 
      </div><!-- End .Head -->
 
      <div class="head">
 
        <h2>Student Help Portal</h2>
 
        <!-- End .Head -->
 
    </div><!-- End #Head -->
 
    <div id="headinfo">
 
 
 
    </div><!-- End Headinfo -->
 
  </div>
 
  <div id="content">
 
 
 
  </div><!-- End Content -->
 
  <div id="footer">
 
  </div><!-- End Footer -->
 
 
 
</body>
</html>

For clarification, Ruby on Rails has a helper method to dynamically link the external stylesheet. So the link tag get's produced as a result. That's why you don't see it in the markup. Wink

The CSS

/* 
    Document   : style
    Created on : Mar 12, 2010, 11:30:42 PM
    Author     : justin
    Description:
        Purpose of the stylesheet follows.
*/
 
/* 
   TODO customize this sample style
   Syntax recommendation <a href="http://www.w3.org/TR/REC-CSS2/
*/
 
root" rel="nofollow">http://www.w3.org/TR/REC-CSS2/
*/
 
root</a> { 
    display: block;
}
 
h1 {
    text-align: center;
}
h2 {
    font-family: verdana;
    font-size: 36pt;
}
 
#head {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #cccccc;
    width: 100%;
    height: 140px;
}
.head {
    float: left;
}
 
.menulink {
    color: #000000;
    text-decoration: none;
    margin-left: 5px;
    margin-right: 5px;
}
 
#headinfo {
    position: absolute;
    top: 0;
    right: 0;
    text-align: right;
    margin-right: 10px;
 
}
 
td.list {
    margin-left: 10px;
    margin-right: 10px;
} 
 
.title {
    font-weight: bold;
}
#content{
    position: absolute;
    top: 140px;
    left: 0;
    width: 100%;
}
 
#footer {
	position: relative;
	height: 50px;
	background-color: #ffffcc;
}
 
.even {
    background-color: #eeeeee;
}
 
.odd {
    background-color: #99ccff;
}
 
.field {
    font-weight: bolder;
    background-color: #ffffcc;
    padding-bottom: 0;
    margin-bottom: 0;
    margin-right: 10px;
}
 
.tablelink{
    font-size: 8pt;
    font-style: italic;
}
.bluetlink, .bluetlink a{
    color: #0066ff;
    font-size: 8pt;
    font-style: italic;
}
 
.mainImg {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
 
.info, .info p {
    font-family: georgia;
    font-size: 10pt;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
}
 
.link {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
 
.paglink {
    width: 10%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
 
.author {
    font-size: 8pt;
    font-style: italic;
    color: #3399ff;
}
 
.submission {
    font-family: georgia, "serif";
    width: 400px;
}
 
.tablehead {
    background-color: #99ff99;
}
 
.tablehead th {
    width: 200px;
    margin-left: 10px;
    margin-right: 10px;
}
 
.tags {
    font-family: times, "serif";
    color: #33cc00;
}
 
.article p {
    font-family: georgia, "serif";
    font-size: 12pt;
    width: 7.5in;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
 
.video p {
    font-family: helvetica, "sans-serif";
    font-size: 10pt;
    width: 7.5in;
    display: block;
    margin-left: auto;
    margin-right: auto;
	color: #336699;
}
 
.article h1 {
    color: #336699;
}
 
.description #label {
    font-family: times, "serif";
    font-size: 14pt;
}
 
.description p {
    font-family: helvetica;
    color: #999999;
    font-size: 10pt;
    font-style: oblique;
    width: 400px;
}
 
.curly {
    font-size: 36pt;
    color: #336699;
}
 
.bigcurly {
    font-size: 72pt;
    color: #336699;
}
 
#name {
    text-align: center;
    font-weight: normal;
    font-style: oblique;
}
 
#media {
	width: 640px;
	display: block;
	margin-left: auto;
	margin-right: auto;	
}
 
.optlinks {
	width: 250px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

The only real divs that are relevant to this are #head, #content, and #footer. But I thought I'd post my whole stylesheet in the event it was needed for some reason.

I'd just link you to the app, but it isn't live yet.

Thanks in advance for the insight. Smile

Thanks,

Justin

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Please no mention of server

Please no mention of server side languages they are irrelevant to a browser side coding discussion, if posting markup then copy the browser source then there are no problems with dynamic scripting not showing elements.

Have you looked at a couple of threads in the 'How To' section of the site that explain how to set page height 100% and sticky footers (if that is what you are after)

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Reading further you appear to

Reading further you appear to have maybe picked up partial solutions to possible requirements? The footer with a negative top margin is generally part of the process for sticky footers with 100% height wrappers- is that what you are trying to achieve?

Why the position abs? there should be need for this don't position elements unless there is a real need to; the footer should naturally fall below the content, if that is, it wasn't positioned absolute.

I see no obvious control of margins on your major elements i.e #footer.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jmbrink26
jmbrink26's picture
Offline
newbie
Salt Lake City, Utah
Last seen: 11 years 29 weeks ago
Salt Lake City, Utah
Timezone: GMT-6
Joined: 2010-03-21
Posts: 10
Points: 11

Hi, thanks for the reply.

Hi, thanks for the reply.

Yes, relating anything to do with server side languages is completely irrelevant to the scope of markup and stylesheets. However, for the sake the of clarification, I merely mentioned Ruby is a means of making sense of my setup.

Otherwise, you would've looked at the code, and said... "well I don't see how this could possibly work anyway, there is no link tag to the external stylesheet, and no inline styling either". Wink

So to save that whole debate, I thought I'd make sense of it the whole situation here.... Tongue

Ok, so the reason I had to use absolute positioning is because like I mentioned, for some reason, whitespace surrounds my header div and the footer div. Additionally, the footer itself is at the "bottom" of the page, which is where it would be if no further content was there that forced you to scroll down.

Here is the screenshot of the whitespace I am talking about: http://justinbrinkerhoff.info/img/helpdesk_position_relative.png

And here is the screenshot of the footer just floating there, stuck in that spot. http://justinbrinkerhoff.info/img/helpdesk_floating_footer.png

The tutorial I used was at: http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/

But it just doesn't work. I am using Firefox 3.6 presently, but if anything, it should work with Firefox moreso than say IE.

And I am sure there is just something I am missing here in the larger scope of things.

jmbrink26
jmbrink26's picture
Offline
newbie
Salt Lake City, Utah
Last seen: 11 years 29 weeks ago
Salt Lake City, Utah
Timezone: GMT-6
Joined: 2010-03-21
Posts: 10
Points: 11

I figured out how to get rid

I figured out how to get rid of the whitespace. I guess I was missing the width element on one of my divs.

However, I still can't get that footer to budge... :S

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Budge? The footer should be

Budge?

The footer should be the last element and should naturally clear below it's previous sibling. position absolute can throw this out which is why I questioned it's use; is it removed now?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jmbrink26
jmbrink26's picture
Offline
newbie
Salt Lake City, Utah
Last seen: 11 years 29 weeks ago
Salt Lake City, Utah
Timezone: GMT-6
Joined: 2010-03-21
Posts: 10
Points: 11

LOL. Perhaps "budge" isn't

LOL. Perhaps "budge" isn't the best term, but it seemed the most practical word. Tongue

As far as the wrapper div goes that I titled "container", and the footer goes, yes. They are both using relative positioning.

Every child div of the container div is using absolute positioning, but being they are child elements, that should not impact the top level sibling elements of container and footer.

jmbrink26
jmbrink26's picture
Offline
newbie
Salt Lake City, Utah
Last seen: 11 years 29 weeks ago
Salt Lake City, Utah
Timezone: GMT-6
Joined: 2010-03-21
Posts: 10
Points: 11

I've been playing around with

I've been playing around with this all day, and I just can't seem to make this footer move itself to the bottom. I even tried looking at the Footer tutorial here on the site, and the tutorial referenced in that same thread at http://www.themaninblue.com/writing/perspective/2005/08/29/, and still, I cannot get the div to move down.

I am at a complete loss here. I have this ticket system that I've spent 3 months in writing from the ground up, have it all otherwise styled from color, layout, and typography, and I just cannot figure this out.

If you or someone could help me get this sorted out, I would be most grateful. I know CSS like the back of my hand, and have been using it for many years, but this is just mind boggling to me why it will not work.

In the past, I have always made a statically positioned footer, and the page itself was static. It just worked. Now, I need a footer div that will always be at the bottom regardless, and I just can't figure it out... Sad

Just a bit frustrating to say the least.

Thank you in advance for the help.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It's time to post a link to

It's time to post a link to the page so we can see things working.

Confirm please:

You are wanting to have a page that has min-height 100% of the viewport height? if so I do not see a complete set of rulesets to achieve this.

P.S. Just spotted font size units expressed as 'pt' that's a print unit best not used in screen rendering 'px', 'em', or '%' are the choices that should be used.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jmbrink26
jmbrink26's picture
Offline
newbie
Salt Lake City, Utah
Last seen: 11 years 29 weeks ago
Salt Lake City, Utah
Timezone: GMT-6
Joined: 2010-03-21
Posts: 10
Points: 11

Ok, I can put this app on a

Ok, I can put this app on a server so you I can link you to it to get the styling worked out. I'll have to do that later today.

As for your question, yes, I want to have a page that is 100% min-height. That seems the most sensible to me, however if there is a more efficient way, then I am open to any alternatives.

Yes, I know that points is traditionally a print measurement. As far as I know, no browsers have any problem rendering the point measurement. I just tend to prefer using points as opposed to pixels, as that is how a the glyphs of a typeface has been measured since their conception. And the screen shows them at the exact same size as they would be in print.

I don't know, I guess I've never given it much thought... Smile

Cool, well I'll get that on my web server so we can get this sorted out. Thanks again for the help.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

*shrug* shows them at the

*shrug* shows them at the exact same size as they would be in print. So what, were not working in a print medium couldn't care less about any supposed correlation this is the web not print! Smile

Screens render pixels they DO NOT render PTs, Glyphs having been measured in pt is neither here nor there. A pixel is the correct and ONLY unit of measurement for screens as it's what makes up the screen, it's the smallest unit a screen is composed of. All of which is a beside the issue in hand though Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jmbrink26
jmbrink26's picture
Offline
newbie
Salt Lake City, Utah
Last seen: 11 years 29 weeks ago
Salt Lake City, Utah
Timezone: GMT-6
Joined: 2010-03-21
Posts: 10
Points: 11

LOL fair enough. Ok, so I

LOL fair enough. Smile

Ok, so I put the app up on my web server. You can view it at http://test.justinbrinkerhoff.info

Here is the direct URL to the stylesheet is http://test.justinbrinkerhoff.info/stylesheets/style.css
There is another stylesheet involved in the mix that is generated by Ruby on Rails titled http://test.justinbrinkerhoff.info/stylesheets/scaffold.css.

That stylesheet is moreso used for the color of links and such.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

But you have done what is

But you have done what is required and it's working!

What you may be confused by and have attempted to skew is where the bottom really is.

The Helpdesk Team this last bit of content is NOT the bottom of your page but it looks as though you are trying to drag the footer back up so the footer sits below this last bit of content.

The sticky footer principle is that that negative top margin used to drag the footer back on screen must be the same height as the footer. The footer only disappears off screen by the amount of it's height to ensure it's back on screen we give a neg margin equal to it's height this ensures that the footer will indeed sit at he very bottom of the veiwport.

If in actuality you want the footer directly under the last bit of content then you do not need height:100% or if you do and you want both then you have bring the footer back into the parent container and sit it after the content.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jmbrink26
jmbrink26's picture
Offline
newbie
Salt Lake City, Utah
Last seen: 11 years 29 weeks ago
Salt Lake City, Utah
Timezone: GMT-6
Joined: 2010-03-21
Posts: 10
Points: 11

I decided to to put the

I decided to to put the footer inside the container div, and just have it below the main content, even if that means it's not necessarily at the bottom.

Seems it's all working as planned now. Thank you for helping me see through that. It's frustrating when you've used CSS for so long, and then just totally stumped when it seems it should just work, but I can see where I went wrong.

Sometimes all it takes is a fresh pair of eyes... Smile