2 Column Fluid Layout with Header

Question

I've tried to describe my problem clearly. If I left out something or I should clarify, leave a comment.

The Problem

I'm trying to create a pretty simple HTML / CSS Layout with a few features.

I've tried to add these:

• A header of an unknown height
• A content div which can scroll if it's contents overflows
• A sidebar which can scroll if it's contents overflows

What I've Tried

Here's what I've tried so far

body,html { width: 100%; height: 100%; margin: 0; }
#header {
  text-align: center;
  padding: 1rem;
  background-color: #AAA;
}
#main-content {
  margin-right: 25%;
  background-color: #CAC;
  height: 100%;
  max-height: 100%;
}
#sidebar {
  width: 25%;
  float: right;
  padding: 0 0 0 15px;
  background-color: #ACA;
  height: 100%;
}

<div id="header">
  Header
</div>

<div id="sidebar">
  Sidebar (coming over "Inner Content")
</div>

<div id="main-content">
  Inner Content. 100% causes a scrollbar to get added to the whole page
</div>

(Bad) Picture

Limitations

• I'm trying to make this easily modifiable so any hacks such as margin + absolute positioning won't work.

• I'm avoiding the table tag.

• No JavaScript

Support

I'm supporting all modern browsers (IE10+)

Answer 1

You should use flexbox. It was made for creating flexible layouts like this. The only caveat is that since you want your header to have fluid height, you'll need to use nested flexboxes, which means you will need to add a parent element for the main content and sidebar.

Here's the code (the Javascript is just for the "fill" button -- it fills the content so the scrollbar can be tested):

window.onload = function () {
    var btn = document.querySelector("#fill");
    btn.onclick = function () {
        var content = btn.parentNode;
        content.removeChild(btn);
        for (var i = 0; i < 7; i++) {
            content.innerHTML += content.innerHTML;
        }
    };
};

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
}
body {
    display: flex;
    flex-direction: column;
}
#header {
    flex: 0 0 auto;
    text-align: center;
    padding: 1rem;
    background-color: #AAA;
}
main {
    flex: 1;
    display: flex;
}
#main-content {
    flex: 75%;
    overflow: auto;
    padding: 15px;
    background-color: #CAC;
}
#sidebar {
    flex: 25%;
    padding: 15px;
    background-color: #ACA;
}

<div id="header">Header<br>Auto height</div>
<main>
    <div id="main-content">
        Inner Content. 100% causes a scrollbar to get added to the whole page<br>
        <button id="fill">Fill content</button>
    </div>
    <div id="sidebar">Sidebar (coming over "Inner Content")</div>
</main>

Answer 2

try adding this :

#main-content {
  margin-right: 25%;
  background-color: #CAC;
  height: 100%;
  max-height: 100%;
  overflow-y: scroll;
}
#sidebar {
  width: 25%;
  float: right;
  padding: 0 0 0 15px;
  background-color: #ACA;
  height: 100%;
  overflow-y: scroll;
}