Question

I’ve been working on a layout for some time. I decided to whip up an example in jsFiddle.

http://jsfiddle.net/PSYgU/1/

The issues I’m running into is that the ASIDE doesn’t expand to the full height of it’s parent “wrapper”, only to the height of the view port. The ASIDE, also needs to be able to be moved to the right or left.

I’m open to other methods of creating this layout, without tables.

/* PHP option to control the width of all content by wrapper via style */
/* PHP option to control which side to float the sidebar to via style */
<div id="wrapper" style="width:100%;">
    <aside style="float: right;">This Sidebar</aside>
    <header>The Header</header>
    <section>The Main Content Area</section>
    <footer>The Footer</footer>
</div>

html, body {
  min-height: 100%;
  height: 100%;
}
#wrapper {
  margin: 0;
  padding: 0;
  background: brown;
  height: 100%;
}
aside {
  width: 200px;
  background: yellow;
  height: 100%;
}
header {
  height: 150px;
  background: blue;
  width: 100%;
}
section {
  background: red;
  width: 100%;
  height: 100%;
}
footer {
  height: 50px;
  background: green;
  width: 100%;
}

Answer 1

Because you have section also on height 100% and also lays within the wrapper it wil take the complete height of the wrapper just like sidebar.

example:
when body/html and wrapper have a height of 200px anything within the element wrapper that has height on 100% will have a height of 200px if you add a header within wrapper with height 150px you need to add this to the 200 from before.

this wil result that the height of sidebar never reach the bottom of the wrapper because its missing the height of the header.

a solution to this is to make the header and section together 100% height like header 15% and section 85%.

this will mean that both of them scale but that the sidebar will always be the same height.

<div id="wrapper">
    <aside style="float: right;">This Sidebar</aside>
    <header>The Header</header>
    <section>The Main Content Area</section>
</div>
<footer>The Footer</footer>

    html, body {
      min-height: 100%;
      height: 100%;
    }
    #wrapper {
      margin: 0;
      padding: 0;
      background: brown;
      height: 100%;
      width:100%
    }
    aside {
      width: 200px;
      background: yellow;
      height: 100%;
    }
    header {
      height: 15%;
      background: blue;
      width: 100%;
    }
    section {
      background: red;
      width: 100%;
      height: 85%;
    }
    footer {
      height: 50px;
      background: green;
      width: 100%;
    }