Trouble with sticky footer, 2 column responsive layout with wide browser support

Question

I need to create the following layout:

Two equal height columns
Sticky footer (positioned at bottom in light content, pushed off page in heavy content)
Responsive (left nav column collapses to 100% at mobile breakpoint)
Wide browser support (need to support down to IE9 but also mobile devices)

Desktop Layout:

Desktop Layout

Mobile Layout:

Mobile Layout

I've looked into many solutions for this and all of them really only solve for some of my needs. Haven't found a full solution yet. Not even the Holy Grail because many of those solutions use flexbox, CSS grid, or CSS tables and IE9 won't support those without a polyfill (which I could do, but for layout?!).

Why not look into bootstrap for this? That is the reason it was made. :) — Nasir T, May 16 '17 at 17:04
Elixir, I'm not using Grails. This is in a java/Angular2 application. I was referring to Holy Grail layout referred to in this A List Apart article: https://alistapart.com/article/holygrail — John Rotondo, May 16 '17 at 17:47

score 0 · Answer 1 · answered May 16 '17 at 18:30

0

You should try CSSLayoutGenerator:

http://csslayoutgenerator.com/

I was able to create a layout with a sticky footer like you are describing.

answered May 16 '17 at 18:30

trevorp

1,161
1
14
19

That's a decent tool, but it cannot achieve all of my requirements. For the footer, it gives you the choice between "Keep the footer at the bottom of browser window" or "Emulate equal height columns". I need both. – John Rotondo May 16 '17 at 19:44
You should be able to achieve this with CSS: http://stackoverflow.com/a/19220042/1839504 – trevorp May 16 '17 at 20:38
That doesn't work either. The content doesn't push the footer beneath the page fold. Instead the footer covers the content, forcing it to scroll behind the footer. – John Rotondo May 17 '17 at 13:06

score 0 · Accepted Answer · answered May 17 '17 at 19:36

I'm going to have to settle on using CSS flexbox for this, then use a polyfill like Flexibility to gain older IE support.

Here's a working Codepen, using Flexbox.

html, body {
 margin:0;
 padding:0
}
.wrap {
 display: flex;
 min-height: 100vh;
 flex-direction: column;
 max-width:1200px;
  margin:auto;
}
.main {
 flex: 1;
 display:flex;
}
footer, header {
 background:green;
 padding:10px;
}
.sidebar {
 background:blue;
 flex:0 0 300px;
 padding:10px;
}
.content{
 background:yellow;
 padding:10px;
 flex:1; 
}
@media screen and (max-width:680px){
 .sidebar{flex: 0;order:0}
 .main {flex-direction:column;} 
}

<!-- could use body element instead of wrap if wanted -->
<div class="wrap">
  <header>Header</header>
  <main class="main">
    <div class="sidebar">Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar </div>
    <div class="content">Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content </div>
  </main>
  <footer>footer - <a target="blank"  href="http://codepen.io/paulobrien/full/FKAxH/">See display table version of sticky footer</a></footer>
</div>

It would be nice to find a solution with pure CSS that can be supported by older IE, but I'm thinking that it's not worth the extra code bloat to get there, especially for a smaller percentage of users.

Trouble with sticky footer, 2 column responsive layout with wide browser support

2 Answers2