CSS footer positioning problems

Mal · Apr 18, 2007

I think I'm just going about this the wrong way, but I can't think of how to do it. It's probably really obvious, so I'd appreciate a point in the right direction at least.

I have a web page I'm designing for a class project that has a header and footer, along with content and a sidebar, that are all positioned with css. Link here:

http://sulley.dm.ucf.edu/~jwalker/dig4716/project4/
CSS file: http://sulley.dm.ucf.edu/~jwalker/dig4716/project4/p2style.css

I had been trying to position them fluidly, but gave up on that for the current incarnation, and just went for the static approach, but I think I need to kinda combine the options. Basically, my problem right now is getting my footer to position right at the bottom of the page, underneath the columns that are there. I don't want to simply absolutely position it there, though, because on some pages, the content column will have to be longer, and I don't want to have to set up additional id's or anything, but I can't get it to work with relative positioning. Is it because everything else is relative positioned?

BTW, please don't make fun of the actual design, I hate it but it's not at a point where I can go change anything, nor do I need to for the project, so I'm just accepting that it's ugly. I just have to make it work now, is all.

jW

noelister · Apr 18, 2007

Mal,

This is just a suggestion --

Try putting the footer div inside the container div you have. Then in your CSS file try

.footer {
float:left;
clear: both;
}

This is a start and hopefully this will get the footer where you will want it.

Mal · Apr 18, 2007

I tried that before, but without the float, and it still showed up at the top. Just tried the float, and now it just disappears behind the top navigation bar. All it appears to have done is change the level it appears on, not the position. Do I need to change some of the other items to position: relative?

jW

Dave the Great · Apr 18, 2007

I didn't spend a lot of time, but this seems to work:

put:
padding-bottom: 110%;

in:
.container

take out:

left: 10px;
top: -2px;

from:

.footer

Mal · Apr 19, 2007

That doesn't seem to work for me. It stretches out the content container, but the footer stays the same. This was in Firefox 2.0, btw, didn't test it in Safari (since if it doesn't work in Firefox, it's no good anyways).

jW

epochblue · Apr 19, 2007

I think your problem is that most your page is positioned absolutely. When you use the "position: absolute" selector, those elements are pulled out of the normal flow of the page.

Since your footer is positioned relatively, it's positioned relatively to the element that contains it and relative to the other "normally" positioned elements on the page. Since everything is absolutely positioned (why did you absolutely position everything?), the footer is rendering in the right place...relatively to the body element that contains it.

I recommend reworking your layout. The layout itself isn't that complicated and doesn't really require the use of absolutely positioned everything. Just a suggestion, though.

As for a push in the right direction - I'd recommend a header div, and content and sidebar div (one that's floated), and a footer that clears the float. That should get you around most of the problems you're having.

I also think this article would be a good one for you to read.

Mal · Apr 19, 2007

Thanks, epochblue, if this wasn't just a small school project and if I had time, I'd certainly do that (or never have done it this way in the first place). However, I've now figured it out (based on ya'lls suggestions, I just had to position the content div relative to make it work out), so thanks all! I'll certainly never design a page with that method again.

jW

epochblue · Apr 19, 2007

Mal said:
Thanks, epochblue, if this wasn't just a small school project and if I had time, I'd certainly do that (or never have done it this way in the first place). However, I've now figured it out (based on ya'lls suggestions, I just had to position the content div relative to make it work out), so thanks all! I'll certainly never design a page with that method again.

jW

There's nothing necessarily wrong with an absolutely positioned layout, but for the type of layout you were going for, it would have been much more flexible if you hadn't used the absolute positioning.

Search

Search

CSS footer positioning problems

Mal

macrumors 603

noelister

macrumors 6502

Mal

macrumors 603

Dave the Great

macrumors regular

Mal

macrumors 603

epochblue

macrumors 68000

Mal

macrumors 603

epochblue

macrumors 68000

Our Staff