Having trouble with footer; needs to adjust with content, be at bottom 100% w

Get Started
1

I am having some trouble with a template I am working on, I am a little rusty from not having done this much in two years so hopefully I can find a little help here. Deathshadow helped me with the initial header and sent me this link for what I am trying to do with the footer: http://battletech.hopto.org/html_tutorials/minHeight/template.html

I need the header to stay like it is, and the footer to stretch 100% across the screen, while staying at the very bottom of however large the content area is. I have tried mixing in parts of the template from the link mentioned above. Through messing around with it I have gotten the footer at the bottom but not got it to stretch 100% without messing up the header.

Here is the current state I have it in: http://www.farrowtechnologyconsulting.com/temp/index.html

What I am trying to achieve: http://www.farrowtechnologyconsulting.com/temp/template.jpg

2

To start with, remove #footer from this rule:


#header, #content[COLOR="#FF0000"], #footer[/COLOR] {
  width: 900px;
}

If you remove the code in red, it works for me.

3

Yea, but once I do that it messes the header up by moving the graphics to the left and the very top links to the right.

4

In what browser? It doesn’t do that for me in Firefox. Make sure to remove the last comma too!

5

The problem you’re having is you’re sizing the footer according to the image(900px) instead of according to your page width(100%). You deleted the whole section when all you should be deleting is the word #footer.

#header, #content, #footer {
  width: 900px;
}

Becomes

#header, #content {
  width: 900px;
}
6

Wow, it was the comma, lol. Thanks. But now will the footer continue to move down the screen to fit whatever content goes inside?

7

Yes, the footer has no size limit so it defaults to 100% of whatever section it’s in. As a standalone div that section is the whole page.

8

Got the footer thanks.

Would you mind checking out http://thesitemonkey.com/geotrac/ again, I now have an animation on there in the content area. For some reason it is not centered with the footer and header/navbar text, the content is slightly off to the right (at least on my screen). Why might it be doing that?

9

Nevermind, was an easy fix, not sure why I didn’t notice it before. Just needed to remove Content from screen.css.

10

I was wrong, still having issues. I am trying to create a main content div that is 900px wide with 50px of padding on the left and right, but when I assign such properties it is no longer centered and aligned with my header. Text-align center does not work either. How could I accomplish this? I need the padding for the animation you see, says it requires 100px extra of space. Also, is anyone having any issues with the move/slider, I was told by the client that in some of the slides the words are being cut off but I cannot seem to mimic this problem on any of my machines.

11

I can’t see that on your site. Is there a page with an example of this?

12

sorry, yes, here is the link http://farrowtechnologyconsulting.com/temp/index.html ; the only difference here is what I have added for the content div in screen.css,
also open to any additional advice or input on things I might be missing to keep the content area clean and in place no matter how much content I put in it. I am going to use this as a template when done, including the header and footer as php includes or something similar.

13

the reason I had #footer taking that rule was I figured you’d have a wrapper around it for that style, just like the header – since the content INSIDE #footer looked to be constrained the same way as the header and the content…

So just as there’s
<div id=“headerWrapper”><div id=“header”></div></div>

I was thinking
<div id=“footerWrapper”><div id=“footer”></div></div>

So that you have your 100% width for the background, while retaining your fixed width for the inner area… though as we discussed, I’d throw out the fixed width for semi-fluid, though that invalidated a lot of the design concepts for the example pages you showed me.

Though since your just centering that content instead of having left/right stuff, that extra div isn’t needed. (I think the picture you showed me had stuff floated left and right inside the footer…)

14

Yeah, can’t do that because the content is ready to be put on the site live, so must be a fixed width.

15

To center the element, you need to set your left and right margins to “auto”. E.g.


#content {
  width:900px;
  padding-left:50px;
  padding-right:50px;
  text-align:center;
  [COLOR="#FF0000"]margin: 0 auto;[/COLOR]
}

The reason things then go off center is that the object within is set to width: 1000px;

16

http://farrowtechnologyconsulting.com/temp/index.html

Are you able to view the slideshow without anything being clipped off? It looks aligned perfectly for me now but with this particular script, for some reason it said to use 100px to give it room, but after setting to 900px it looks fine for me.

Also, since I have to use a fixed width on the content area, would it matter if I used tables within that div for the different portions of content?

17

Yep, looks good to me. Flash content is good at scaling like this.

Also, since I have to use a fixed width on the content area, would it matter if I used tables within that div for the different portions of content?

Should be fine, but only use a table if you have tabular data (that needs to be sorted into rows/columns). Otherwise, <table> is the wrong element to use.

18

Ok, also, forgot to ask, I have used Helvetica Neue Lt STd for the headings in the different sections on each page, would you suggest using webfonts (webkit) , creating an image for those headings, or not using a font other than basic fonts which obviously are not that appealing when we’re talking about headings?

Any reason in particular that tables are the wrong thing to use for sections containing different paragraphs with different heights etc? Here is an example of the content for one of the pages; http://farrowtechnologyconsulting.com/temp/Law_enforcement-Content.jpg

19

Crap, back to the earlier issues (should have tried this before asking about the footer moving down with the content), I added a div underneath the animation, but the text for that section gets cut off and the footer is not pushed down to the bottom to make room for the content like it’s supposed to, any idea what might need to be changed? http://thesitemonkey.com/geotrac/

20

Seemed to have somewhat solved the content moving footer issue, (not sure if it was a missing /div> or float issue), now I am having trouble getting two divs underneath the slider to be on the same line, have been playing with this for an hour now, stuck. http://thesitemonkey.com/geotrac/