Positioning a Div Layer

[escaflowne11]

I have figured out a majority of my css issues, now I have another question for my site. I would like to have a div at the bottom of my page that holds the copyright information my cliant wants to put there. look at the page here...

www.scoffshop.com/redesign/index2.html

www.scoffshop.com/redesign/content2.css


How would I get the content to expand through the rest of the page, and always have the lowest div sitting at the bottom?

[moojoo]

http://www.alistapart.com/articles/footers/

[ukgeoff]

With due respect to moojoo, this article is totally overkill. At a basic level all you need is:

Code: Select all

<div id='header'>
   header content
</div>

<div id='mainarea'>
   Central section
</div>

<div id='footer'>
   Copyright, etc
</div>

Footer will always be at the bottom below everything else without any css required. At least as far as positioning is concerned.

[moojoo]

Yeah but from what I gathered he wanted bottom of the viewport regardless of content. if I misunderstood then woops!

[escaflowne11]

The main problem is that I have a header and nav defined by pixles, then a content area defined by %. I can never really get a perfect 100% top to bottom layout nomatter how I tried. So I designed it this way. Now if I put a div at the bottom of all the content and stuff, there is an invisable space that pushes the copyright div down further than I want it to. Im learning Java scripting now from W3Schools online to help, and I think I am gonna do the scripted method to create a footer. Ill just use an external .js file or something... If you can though, could you show me why I cant have the bottom div to butt up right next to the content div?

[ukgeoff]

You are going to get a 5px gap between content and the footer because that's what you have specified with 'margin'.

Personally, I would get rid of the overflow: auto; in the #content styling.

Suggest you fill out the content with some waffle so you get a better feel for what is happening.

Do you have Firefox on Windows? If so, download and install the web developers toolbar. It's an absolute must and the 'Outline Current Element' is great for seeing exactly what's where.

If you had this, you would be ably to see, although they are not effecting the layout, that some of your nav styling is not quite right. I thought I'd sorted all that with you once!

[escaflowne11]

You havnt told me about the firefox program, and I didnt know that the 5px margin on the content pushed under the div... I do throw up content on and off to see the effects of the code, and it pushes perfectly. Im about ready to set up his new site now! Thanks for your advice, hopefully I will get a final result to get critiqued. Thanks a lot guys, Ill come back if I need more help!