Contents
The problem is in the footer area. With the faulty CSS, the ‘bottom bar’ rides up into the main footer above. However, I think I’ve cleared floats correctly. Below is what I think is the faulty section of CSS (but it will make more sense to view it along with HTML – see CodePen links further below):
My main problem is about the content div which is placed between menu div and the footer. If this content div has much information, its height becomes larger than the main div (container), and the footer is displayed over the information from the content div.
How to use overflow in HTML footer CSS?
Since you are using floating elements inside footer-column-container, its height won’t be set automatically. You need to use overflow:hidden in .footer-column-container CSS. So that the div will accommodate its floating child elements , ie the li elements inside footer-column-container.
If you have your footer at a (somewhat) fixed height, like I do: Just set your bottom margin of your div containing the page content to a height just greater than that of the max footer height. Scrolling content will stop right on top of the footer!
To improve processing performance for Header and Footer web templates in a portal, enable header and footer output caching. Header and Footer web templates are parsed and rendered every time a page is loaded. Caching header and footer output significantly reduces page processing time.
Why is my header and footer not rendering?
If you enable output caching only by creating site settings, parts of the header and footer will not render properly and error messages will be displayed. Open the Portal Management app.
Header and Footer web templates are parsed and rendered every time a page is loaded. Caching header and footer output significantly reduces page processing time. For a new user, output caching is enabled by default. The following site settings are available and set to true by default to support this functionality: