12

I am trying to make a css layout that looks like this

enter image description here

The CSS term for this type of layout is known as the "holy grail" I think. The problem I am facing is that when I use layouts and solutions I find online I do not get them to work properly as I want them to. What I am trying to do is make a page that, regardless of content, will have the footer at the bottom of the browser and the columns stretching down to it. So far I have only seen pages that have the footer placed where the content stop, the result is some blank space under the footer.

If anyone could help me out on this it would be greatly appreciated!

2
  • What is the difference between what you want and matthewjamestaylor.com/blog/…
    – Gaurav
    Commented Dec 23, 2010 at 2:19
  • 1
    The difference is that in matthewjamestaylor.com's solution the page stops before the window (if you remove the text) like this oi55.tinypic.com/ezhbvb.jpg. Resulting in some unwanted blank space in at the bottom of the browser window. My wish is for the page to not have that blank space, so the columns will need to stretch to the bottom even if there is not enough content on the page. Commented Dec 23, 2010 at 4:39

5 Answers 5

8

In 2017, you can achieve this layout pretty gracefully and easily with flexbox:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
header {
  flex: 0 0 100px;
  background-color: #C14F4F;
}
main {
  flex: 1;
  display: flex;
  background-color: #699EBD;
}
footer {
  flex: 0 0 40px;
  background-color: #C14F4F;
}
.left, .right {
  flex: 0 2 150px;
  background-color: #C28282;
}
.middle {
  flex:1 1 300px;
}
<header></header>
<main>
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</main>
<footer></footer>

1
  • +1 and by far and in my knowledge the only good answer here! Flexboxes as of 20917 are the only ones that can do this without introducing any other problems!
    – Sam
    Commented Jun 1, 2017 at 10:28
5

It's 2020, how about some Grid?

 body {
    display: grid;
    height: 100vh;
    grid-template: auto 1fr auto / auto 1fr auto;
  }

  header {
    grid-column: 1 / 4;
  }

  .left-sidebar {
    grid-column: 1 / 2;
  }

  main {
    grid-column: 2 / 3;
    overflow: auto;
  }

  .right-sidebar {
    grid-column: 3 / 4;
  }

  footer {
    text-align: center;
    grid-column: 1 / 4;
  }
   
  html, body {
      margin: 0;
      padding: 0;
      background-color: #aed9e0;
  }

  body > * {        
    outline: 1px dashed #247ba0;
  }

  .left-sidebar, .right-sidebar, main, header, footer {
    padding: 2rem;
  }
<body>
  <header><strong>Header</strong></header>
  <div class="left-sidebar">Left Sidebar</div>
  <main contenteditable>
     Main Content
     <ul>
       <li>Item 1</li>
       <li>Item 2</li>
     </ul>
  </main>
  <div class="right-sidebar">Right Sidebar</div>
  <footer>Footer Content</footer>
</body>

0

See this technique for top/bottom, and just put sidebars in it. Even works in IE6 :p

4
  • Ah, those are static top and bottom. What I am looking for is a layout that includes the top and bottom in the scrolling, if you know what I mean :) Commented Dec 23, 2010 at 2:06
  • @HenrikSkogmo I do not know what you mean. Please elaborate how to handle content that is shorter than the browser window, as well as taller than the window.
    – Phrogz
    Commented Dec 23, 2010 at 2:10
  • Here is an example, matthewjamestaylor.com/blog/…. The problem with this layout is that if you remove the text of the 3 columns, you will be left with a page that look like this, oi55.tinypic.com/ezhbvb.jpg. I want the columns to stretch down to the bottom of the page with the footer. :-) Commented Dec 23, 2010 at 2:17
  • 1
    @HenrikSkogmo That does not fully answer the questions I asked. Also, please use the word "window" instead of "page" if that's what you mean. Please also specify how to handle if a column is longer than the content, and shorter. (That's four questions now for you to clarify.)
    – Phrogz
    Commented Dec 23, 2010 at 2:21
-1

This seems to mostly do what you need. http://www.savio.no/examples/three-column-layout-6.asp It uses a faux 100% height column in addition to the three.

1
  • After some experimenting and testing faux columns is truly a nightmare to wrap your head around. A lot of layers and div(isions). It looks like the holy grail have two different paths. Thanks for the solution! But I am afraid I prefer the invisible-content way. Commented Dec 23, 2010 at 4:34
-2

Use the following for the two sidebars:

padding-bottom:9999px;
margin-bottom:-9999px;

This creates "invisible" content which allows the sidebars to stretch all the way to the bottom (and the negative margin "normalizes" the sidebar dimensions so that calculations carried out on the sidebar still make sense).

3
  • BTW, if your page is long enough, this will break. I'm not sure how large these values can be, but you can test larger values if necessary... Commented Dec 23, 2010 at 3:04
  • Using this method is much cleaner, but a bit unreliable and "limited". But I with big enough numbers and content management, this would work in my favor. Thanks! Commented Dec 23, 2010 at 4:30
  • 1
    I can't get this to work at all. Can you explain a little bit more what to do? This is as far as I could get. Commented Dec 23, 2010 at 5:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.