Streaming live at 10am (PST)

Keeping footer at the bottom of page!

I have been rocking along on this new website for a city, and have been using a symbol within a div for all the rest of the page’s footers… and it has been working just fine. (see other pages)

However, on this page (the “Waste/Wastewater” page in the Navigator) the div seems to be relative to the bottom of the screen, not the bottom of the page… see screenshots.

I looks fine…

Until you scroll down!

Could someone point out where I have screwed this thing up? VERY FUSTRATED. :joy:

Thx in advance!

Here is my public share link:

(how to access public share link)

1 Like

The issue seems to have been fixed? I looked at it in Design mode and Preview Mode.

Are you sure you are looking at the “waste/wastewater” page? that’s the only page that has the issue… it is still wrong on my end…

I see it now, thanks. :smiley: I recommend not setting the Footer to fixed and having it sit right underneath your content section. Then simply increase the height of the section. :wink:

Sweet. Now… How do I do that? :grin:

I sure wish there as an in-depth explanation of how all the placement settings worked…

As far as I can tell, I don’t see an element in the footer that has the condition of Fixed…

Sorry, I meant to say Absolute. :smiley: I found that either the Footer or the Parent div of the Footer was set to “Absolute” (Can’t check right now, sorry).

Hi @ilikewebdesign,

@MinewireNetwork was right, parent div “FD footer div” has position Absolute instead of Fixed.

Chenge position to Fixed and everything will be fine.


1 Like

Wow. Can’t believe how simple that was…

On that note, do you guys know of any learning material that explains Position, Display Setting and the like? I really don’t understand completely the underlying concepts.

Thanks for the help!

About Position properties I have been found pretty good explanation lately:

About Display Settings I could try to find something too.There is a lot of information about it in the web, because it is standard CSS properties.


Excellent way of putting it, I couldn’t have said it any better! :smiley:

1 Like

Yep. That definitely helped. Many thanks! :grinning:

1 Like

Always welcome :blush:

Hey… I just realized that the footer is always visible at the bottom of the screen. That’s actually not what I was going for, I was trying to make the footer act like the one on the “Airport” page. That one acts as it should.

I tried duplicating the structure and classes of the Airport page, so there must be something wrong on the Wastewater page.


Ok, I got it.

Sorry I didn’t got it from first time. Here is workaround:

P.S. There is some weird footer behavior appear at the end, not sure why, probably because of my internet connection.

@sabanna, thx for the video, but it is still not behaving like any of the other pages… see screenshot.

As you can see, I have added a paragraph to that section, and the footer is still not at the bottom of the page…

Is it something I am doing wrong? Seems unlikely, in that all my other pages work fine! :joy:

If you are planning to add more information to this page then for FD footer div change position: absolute to position: relative

Ha! That worked! Thanks!

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.