8 replies [Last post]
sparq
Offline
newbie
Last seen: 12 years 43 weeks ago
Timezone: GMT-5
Joined: 2007-10-14
Posts: 5
Points: 0

I'm currently working on a two column floating design with header and footer. I want no space between footer and the page bottom, and have no padding-bottom or margin-bottom at the footer.

The problem is this, when I don't have enough content on a page to fill the page, the footer will stay close to the bottom of the content, leaving a gap between the footer and the page bottom.

Maybe someone here know how to make the footer always appear at bottom of the page in a floating design? (The footer doesn't necessary needs to be floated.)

A page at the site with little content:
http://sebastean.se/drupal/?q=node/4
(the gap should appear at a screen resolution of 1024*768 or more.)

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 48 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Thinking in print--the web is not print

My first thoughts are; 1) don't worry about it, you're thinking in print media terms, and 2) if you don't have that much content on the page, why have the page?

See http://garyblue.port5.com/webdev/footertest.html and
http://garyblue.port5.com/webdev/vcenter-css.html for possiblt solutions.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

chikoppi
Offline
Enthusiast
Last seen: 9 years 34 weeks ago
Timezone: GMT-6
Joined: 2006-06-25
Posts: 85
Points: 2

sparq wrote:I'm currently

sparq wrote:
I'm currently working on a two column floating design with header and footer. I want no space between footer and the page bottom, and have no padding-bottom or margin-bottom at the footer.

Well, I've never tried it, but what about using absolute positioning in the CSS?

#footer { position: absolute; bottom: 0; }

You would need to make your "footer" div a direct child of the "body" div (not nested in any other div). By adding a bottom margin to your "outer-container" div equal to the height of your footer you should be able to keep the two from overlapping.

sparq
Offline
newbie
Last seen: 12 years 43 weeks ago
Timezone: GMT-5
Joined: 2007-10-14
Posts: 5
Points: 0

thanks kk5st and chikoppi

thanks kk5st and chikoppi for writing.

kk5st: filling up the browser window can take alot of content depending on site design and viewers screen resolution. thanks for the links, I'll bookmark them!

chikoppi: I tried this but in my otherwise floating design the size of body was less then 100% of the page (when little content), instead being relative to the height of the content, still leaving this gap between the footer and the page bottom. I tried to correct this with min-height on body but it didn't affect the height.

chikoppi
Offline
Enthusiast
Last seen: 9 years 34 weeks ago
Timezone: GMT-6
Joined: 2006-06-25
Posts: 85
Points: 2

sparq wrote:I tried this but

sparq wrote:
I tried this but in my otherwise floating design the size of body was less then 100% of the page (when little content), instead being relative to the height of the content, still leaving this gap between the footer and the page bottom. I tried to correct this with min-height on body but it didn't affect the height.

What about changing the positioning from "absolute" to "fixed." This should nail the div to the bottom of the browser screen.

IIRC, there are some addition CSS declarations you'll have to add to get fixed positioning to work with Explorer. You'll have to hunt them down to be sure, but I used fixed positioning on the site below (for a different purpose) and that markup might give you a lead:

http://www.slingshotmarketingllc.com/

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 48 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

sparq wrote:kk5st: filling

sparq wrote:
kk5st: filling up the browser window can take alot of content depending on site design and viewers screen resolution.

That's why I said it was a print medium paradigm. Print is a fixed medium, the web is a continuous medium.

Quote:
thanks for the links, I'll bookmark them!

They're not there just for bookmarking. They're there for their (I couldn't resist that homophonic opportunity) applicability to your issue. Either is a solution to your perceived problem.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sparq
Offline
newbie
Last seen: 12 years 43 weeks ago
Timezone: GMT-5
Joined: 2007-10-14
Posts: 5
Points: 0

chikoppi, thanks

chikoppi,

thanks again

postion fixed would fix the problem leaving me with another problem, that is, not postion the footer at the bottom of the content when there's enough content to fill the browser window.

Following one of the links from kk5st I found this description of the solution, what I found a much better description of what I want to do then I could come up with:

"The footer will sit at the bottom of the viewport unless the content pushes it down."

sparq
Offline
newbie
Last seen: 12 years 43 weeks ago
Timezone: GMT-5
Joined: 2007-10-14
Posts: 5
Points: 0

kk5st, the links was a

kk5st, the links was a solution for my problem, I would just have to give up my floating design, which I might do, but for now the links stays in my bookmarks Smile

sparq
Offline
newbie
Last seen: 12 years 43 weeks ago
Timezone: GMT-5
Joined: 2007-10-14
Posts: 5
Points: 0

chikoppi,thanks

-double post-