a look @ basic positioning

A sandbox for positioning tests

by Matt Rummler

HTML

<body>
<!--    text for the body @ the top -->
<header class='topBar'>
    This is the top bar (where the wist logo/image will go)
</header>
<section class='main'>
    video goes here
<div class="leftToRight">
  <div class="left">
  left div
      This is text in the left div.
  </div>
  <div class="right">
  right div
  </div>
    leftToRight div
    <div class='rightSideBar'>
       This is the right side bar... 
    </div>
</div>
    </section>

    text for the body
</body>

CSS

body
{
/*    display: inline;
/*    position: fixed;
/*    display: inline;*/
    width: 100%;
    height: 100%;
    background-color: #ffaa77;
}
header
{
    background-color: #77aaff;
}
.main
{
    display: block;
/*    */
    width: 60%;
    height: 90%;
    background-color: #aa77ff;
}
.leftToRight
{
/*    display: inline;*/
    background-color: #aaff77;
}
.left
{
/*    display: inline;*/
    background-color: #ff77aa;
}
.right
{
/*    display: inline;*/
    background-color: #f7f7aa;
}
.rightSideBar
{
    float: right;
/*    display: inline;*/
    background-color: #7f7faa;
}