13 replies [Last post]
Srizzil
Srizzil's picture
Offline
Regular
South Africa
Last seen: 2 years 14 weeks ago
South Africa
Timezone: GMT+2
Joined: 2010-11-13
Posts: 19
Points: 25

So I've had this problem before, about 13 months ago, and now that I'm using the same concept the problem has popped up again. I just can't see the problem, I'm hoping a fresh pair of eyes will help spot it.

Here's the Problem Page.

I'm floating the content either side of the page, and have enclosed my float elements with overflow. So I don't know what to do next. If you can help, that would be amazing.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 years 11 weeks ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2037
Points: 2256

Well, what do you want it to

Well, what do you want it to do?

yet again.

Srizzil
Srizzil's picture
Offline
Regular
South Africa
Last seen: 2 years 14 weeks ago
South Africa
Timezone: GMT+2
Joined: 2010-11-13
Posts: 19
Points: 25

It should go right to the

It should go right to the bottom of the page. Right now it's sitting on top of content.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 years 11 weeks ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2037
Points: 2256

Try moving the footer DIV

Try moving the footer DIV outside of the main wrapper.

I'd fix up the markup errors first though: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.unclekornicob.com%2Fblog%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

yet again.

Srizzil
Srizzil's picture
Offline
Regular
South Africa
Last seen: 2 years 14 weeks ago
South Africa
Timezone: GMT+2
Joined: 2010-11-13
Posts: 19
Points: 25

Nope that's definitely not

Nope that's definitely not it. If I move the Div the footer goes up to the top of the page.

I fixed all the errors that I could and it made no difference. Most of them were petty errors.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 years 11 weeks ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2037
Points: 2256

Srizzil wrote: I fixed all

Srizzil wrote:

I fixed all the errors that I could and it made no difference. Most of them were petty errors.

Doesn't matter if it makes no difference, it's still required. Now you've got to validate your CSS.
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.unclekornicob.com%2Fwp-content%2Fthemes%2FUncleKornicob%2Fstyle.css&profile=css21&usermedium=all&warning=1&vextwarning=&lang=en

yet again.

Srizzil
Srizzil's picture
Offline
Regular
South Africa
Last seen: 2 years 14 weeks ago
South Africa
Timezone: GMT+2
Joined: 2010-11-13
Posts: 19
Points: 25

I'll clean that up too, but

I'll clean that up too, but non of those errors will effect the footers position. Do you have any idea why it's doing that? I would think the overflow would fix it.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 years 11 weeks ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2037
Points: 2256

Srizzil wrote: I'll clean

Srizzil wrote:

I'll clean that up too, but non of those errors will effect the footers position. Do you have any idea why it's doing that? I would think the overflow would fix it.

The quotes and equal signs in the CSS may or may not be causing it to ignore what's following. Validation is really the first step, not an afterthought. You'll thank me later.

Do you just want the footer below the rest of the page or do you want it fixed to the bottom of the viewport (always visible)?

yet again.

Srizzil
Srizzil's picture
Offline
Regular
South Africa
Last seen: 2 years 14 weeks ago
South Africa
Timezone: GMT+2
Joined: 2010-11-13
Posts: 19
Points: 25

I just want it below the rest

I just want it below the rest of the page. But if the page has only a little information, then I want it to still be on the bottom of the page.

Srizzil
Srizzil's picture
Offline
Regular
South Africa
Last seen: 2 years 14 weeks ago
South Africa
Timezone: GMT+2
Joined: 2010-11-13
Posts: 19
Points: 25

Cleaned up most of the errors

Cleaned up most of the errors in the CSS, still nothing. This shouldn't be that hard, it's probably something small and silly.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 years 11 weeks ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2037
Points: 2256

Srizzil wrote: I just want it

Srizzil wrote:

I just want it below the rest of the page. But if the page has only a little information, then I want it to still be on the bottom of the page.

Oh. OHHHHHHH! OK. Now I see what you want.

You want a sticky footer layout. Here is the basic idea: http://www.pmob.co.uk/temp/sticky-footer.htm

You are probably going to have to rehash your layout a bit.

yet again.

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

Start by removing all

Start by removing all {position: relative;} and {position: absolute;} statements.

The overflow property goes on the parent of a float element.

Don't bother with sticking the footer on short pages; that's a print thing and doesn't really belong on the web. Besides, if there is so little content on a page, maybe you don't need it. Wink

And, as V has suggested, clear up all html and css errors before proceeding.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 years 11 weeks ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2037
Points: 2256

gary.turner wrote: Start by

gary.turner wrote:

Start by removing all {position: relative;} and {position: absolute;} statements. ...

I was going to ease into that one. Wink

yet again.

Srizzil
Srizzil's picture
Offline
Regular
South Africa
Last seen: 2 years 14 weeks ago
South Africa
Timezone: GMT+2
Joined: 2010-11-13
Posts: 19
Points: 25

Gary, you genius! I was

Gary, you genius! I was hoping you would see this and help me out. It's all working now Cool

I'm slightly confused as to the purpose of {position: relative;} and {position: absolute;} statements if I still achieve the same thing without them.