simple 4 way layout with centered pieces

simple 4 way layout

by Scott Yannitell

HTML

<script src="http://fonts.googleapis.com/css?family=Ubuntu"></script>
<div id="container">
  <header>
    <table class="TitleTable">
      <tr>
        <td>
          <div class="titleText"><b>title</b></div>
        </td>
      </tr>
    </table>


  </header>
  <div id="content">
    Main content here
  </div>

  <footer>
    <table class="SubmitTable">
      <tr>
        <td>
          <button class="submitButton" type="button">Submit</button>
        </td>
      </tr>
    </table>
  </footer>

</div>
<div id="Left_Sidebar">
  <table class="FeatureTable">
    <tr>
      <td>
        <div class="selectorText"><b>Feature</b></div>
      </td>
    </tr>
  </table>
</div>
<div id="Right_Sidebar">
  <table class="ColorTable">
    <tr>
      <td>
        <div class="selectorText"><b>Color</b></div>
      </td>
    </tr>
  </table>
</div>

SCSS

html, body {
  height: 100%;
}
body {
  margin: 0;
  overflow: auto;
  font: 12px Ubuntu, Arial, sans-serif;
}

$sidebar-width: 20%;
$header-height: 10vh;
$footer-height: 10vh;
$submit-height: 6vh;
#Left_Sidebar, #container, #Right_Sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
}

#Left_Sidebar {
  position: absolute;
  left: 0;
  right: 100% - $sidebar-width;
  background: blue;
}

#Right_Sidebar {
  position: absolute;
  right: 0;
  left: 100% - $sidebar-width;
  background: purple;
}

#container {
  background: green;
  left: $sidebar-width;
  right: $sidebar-width;

  header {
    height:$header-height;
    text-align:center;
    background: orange;
  }

  #content {
    text-align:center;
  }
  
  footer {
    height:$footer-height;
    text-align:center;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    background: red;
  }
}

.selectorText {
  font-size: 4vw;
  color:white;
  text-align:center;
}

.titleText {
  font-size: 7vh;
  color:white;
  text-align:center;
}

.submitButton {
  width:30vh;
  font-size:3vh;
  height:$submit-height;
  border-radius:2vh;
  background-color:#fff;
  
}

/* center it the 90s way!! With tables haha */
.ColorTable,
.FeatureTable {
  height:100%;
  width:100%; 
  position: absolute; 
  background-color:darkmagenta;
  top: 0; bottom: 0; left: 0; right: 0;
}

.ContentTable {
  height:100%;
  width:100%; 
  position: absolute; 
  background-color:darkorange;
  top: 0; bottom: 0; left: 0; right: 0;
}

/* un momento porfavor */
.TitleTable {
  height:$header-height;
  width:100%; 
  position: absolute; 
  background-color:darkblue;
  top: 0; bottom: 0; left: 0; right: 0;
}

.SubmitTable {
  height:$footer-height;
  width:100%; 
  position: absolute; 
  background-color:darkred;
  top: 0; bottom: 0; left: 0; right: 0;
}