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)


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.



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:


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


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!


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