Probleem met clear

/* Content */
.cLeft {
  background-image: url("gfx/left.png");
  background-position: left;
  background-repeat: repeat-y;
  clear: both;
}

.cRight {
  background-image: url("gfx/right.png");
  background-position: right;
  background-repeat: repeat-y;
}

#cContent {
  padding: 4px 9px;
}

#cBox {
  position: relative;
  z-index: 2;
  float: left;
  background-color: #fafafa;
  border: 1px solid #d7d7d7;
  width: 65%;
}

#cCharacters {
  float: right;
  width: 33%;
}


  <div class="cLeft">
    <div class="cRight">
      <div id="cContent">
        <div id="cBox">
          <br /><br />
          Aap
        </div>
        <div id="cCharacters">
          <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
          Blaat
        </div>
        <br class="gClear" />
      </div>
      <br class="gClear" />
    </div>
  </div>

/* Content */
.cLeft {
  background-image: url("gfx/left.png");
  background-position: left;
  background-repeat: repeat-y;
  clear: both;
}
 
.cRight {
  background-image: url("gfx/right.png");
  background-position: right;
  background-repeat: repeat-y;
}
 
#cContent {
  padding: 4px 9px;
}
 
#cBox {
  position: relative;
  z-index: 2;
  float: left;
  background-color: #fafafa;
  border: 1px solid #d7d7d7;
  width: 65%;
}
 
#cCharacters {
  float: right;
  width: 33%;
}
 
 
  <div class="cLeft">
    <div class="cRight">
      <div id="cContent">
        <div id="cBox">
          <br /><br />
          Aap
        </div>
        <div id="cCharacters">
          <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
          Blaat
        </div>
        <br class="gClear" />
      </div>
      <br class="gClear" />
    </div>
  </div>