Positioning

By % instead of by also with the sidebar where I want it ... though there may be a better way...

by Matt Rummler

HTML

<!DOCTYPE html>
<!-- to see the result of this in a more easily resizeable window just copy this into an HTML page... this is just here as a reminder -->
<body>
    text for the body @ the top
<!--
<div class="corner">
      I will add enough text here to cause the overflow to occur to show the scrollbars perform as expected.
I think it's a little dumb that scrollbars are showing up when they aren't yet needed only appear as needed... 
      hopefully this is long enough....    
</div>
-->
<header class='topBar'>
    This is the top bar (where the wist logo/image will go)
</header>
<section class='main leftToRight'>
    video goes here
<iframe width="854" height="510" src="https://www.youtube.com/embed/9pZ5kf-N8Es" frameborder="0"></iframe>
    <div class='rightSideBar'>
       This is the right side bar... 
    </div>


</section>
<div class="leftToRight">
  <div class="left">
  <p>left div</p>
      This is text in the left div.
  </div>
  <div class="right">
  <p>right div</p>
  </div>
    hello in the div
</div>
text for the body
</body>

CSS

* 
{
    margin: 0px;
    padding: 0px;
    font-family: Arial,Verdana,sans-serif;
    font-size: 1.1em;
    color: #333;
}

html
{
    height: 100%;
    width: 100%;
}

body
{

    margin: 0 auto;
    padding: 0px;
    height: 100%;
}

/*
.right 
{
  float: left;
  right: 0%;
  top: 0%;
  width: 49.5%;
  height: 99%;
  z-index: 4;
  min-width: 345px;
  max-width: 458px;
    background-color: #b0e0e6;
}

.left
{
  float: left;
  left: 0%;
  top: 0%;
  width: 49.5%;
  height: 99%;
  z-index: 2;
  min-width: 345px;
  max-width: 458px;
  background-color: #60e0e2; 
}
*/
[class~='leftToRight']
{
  display: flex;
  flex-flow: row;

/*  width:85%;*/

/*  max-height: 550px;*/
  margin: 0 auto;
  z-index: 1;
  background-color: #feeee9;
}
header .topBar
{
    position: absolute;
    top:0%;
/*    left:2%;*/
    width:100%;
    min-width: 150px;
  background-color: #f0efe9;
}

[class~='main']
{
    width:85%;
    height:85%;
    left:5%;
  min-width: 854px;
  max-width: 1000px;
  min-height: 510px;
/*  max-height: 650px;*/
   z-index: 0;
  background-color: #ffe0e9;
}
.rightSideBar
{
  display: flex;
  flex-flow: inherit;
/*  float: right;*/
 /*   float: left;*/
  /*position: float;*/
  /*position: float;
   */
    width: 15%;

    height: 120%;
        */
    /*
    min-width: 250px;
    max-width: 350px;
    */
    right: 0%;
    top: 0%;
    z-index: 6;
  background-color: #ffe077;  
}