Positioning again relative

This one has a container which holds a left & a right section then has a center section located in the middle all using % This one is different than my other fiddle like this. This one uses position:relative. relative makes the sections only as large as the amount of text they have.

by Matt Rummler

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>
<div class="leftToRight">
  <div class="left">
  here is some content.
  </div>
  <div class="right">
  <p>blah blah blah In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
  <p>blah blah blah 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.' blah blah blah</p>
  </div>

</div>
  <div class='center'>
      This is the center div
  </div>
</body>

CSS

html
{
    width: 100%;
    height: 100%;
/*    min-height: 2000px;*/
    background-color: #a7b9a7;
}
.right {
    position: relative;
    float: right;
    right: 1px;
    top:0px;
    width: 49%;
    background-color: #b0e0e6;
  height:98%;
}
.leftToRight
{
  position: relative;
  inline-box-align: initial;
  height: 60%;
  width: 90%;
  min-width: 200px;
  min-height: 400px;
  background-color: #f0e0e9;
  margin: 0 auto;
}
.left
{
  position: relative;
  float: left;
  left:1px;
  top:0px;
  width:49%;
  height:98%;
  background-color: #60e0e2;
}
.center
{
    position: relative;
    width: 60%;
    height: 80%;
    left: 20%;
    top: 10%;
    z-index: 1;
  background-color: #e2e060;
}