3

I have a website with a side-bar navigation and a main content pane, wrapped in a container element. The content has a background of its own, while the menu borrows that of the parent container.

In cases where the sidebar is longer than the content, I need the content element to stretch all the way down to cover the same height, so that the content background makes up the majority of the screen space to keep the design from looking silly.

This works beautifully by giving the container display: tableand both children display: table-cell. This will place them next to each other and ensure that they're always the same height.

However, now I want to have two lesser navigation bars in the content. One fixed to the top, one to the bottom of the pane. I use position: relative on the content and position: absolute on the nav bars to achieve this.

This solution works perfectly on modern browsers, but Firefox versions before 31 do not accept position: relative on table-cell elements, and the navbars are positioned relatively to the document body.

Can I somehow make this solution work on all common browsers? I need to maintain that the content element stretches down with the sidebar.

Links:

A simplified code example:

div {
  display: table;
  width: 100%;
}

nav {
  vertical-align: top;
  display: table-cell;
  width: 25%;
}

main {
  display: table-cell;
  position: relative;
}

main header,
main footer {
  position: absolute;
}

main header {
  top: 0;
}

main footer {
  bottom: 0;
}
<div>
  <nav>
    Sidebar
  </nav>
  <main>
    <header>
      Top navbar
    </header>

    Content

    <footer>
      Bottom navbar
    </footer>
  </main>
</div>
double-beep
  • 5,031
  • 17
  • 33
  • 41
ividyon
  • 656
  • 2
  • 6
  • 17

1 Answers1

0

According to this answer: https://stackoverflow.com/a/8312358/3929902, the only way to solve this is by adding a <div> around the elements displayed as table-cells, with position relative, like in this fiddle http://jsfiddle.net/qp7vhtk8/6/

In your example that just means adding:

div {
   position: relative;
}
Community
  • 1
  • 1
klasske
  • 2,164
  • 1
  • 24
  • 31
  • The answer you linked implies I should put a relative `
    ` *inside* my content element. However, my bottom navbar will then position itself right below the `
    `, and leave whitespace below, negating why I originally used table-cells in the first place. **[A JSFiddle to show the issue with the answer.](http://jsfiddle.net/qp7vhtk8/9/)**
     – ividyon Aug 22 '14 at 20:12
  • Sorry, I need to append my previous comment: In the last sentence, I meant _"negating why I originally made the navbars `position: absolute` in the first place"_ – ividyon Aug 22 '14 at 20:35