[Resolved] Sticky footer

[Pat]

Just a tip re: Micheal’s very helpful CSS flexbox contribution above (thanks for sharing). This has worked for me very well to create a sticky footer (stuck to the bottom of the browser window) BUT it doesn’t address the content width. If the content consists of long paragraph text, it renders fine – filling the width of the content container. But if the content consists of small bits of text, e.g. a list or contact information, the container only flexes wide enough to accommodate the content – and the content container is centered horizontally in the browser window. So you can end up with a collection of pages with inconsistent widths – mostly visible on large screens.

There is a simple fix: assign 100% width to the div.container:

div.container {
	flex: 1 0 auto;
	width: 100% !important;
}

pk

[David]

Thanks for sharing Pat

[Author]

Posts