Overflow Left

A DIV that is "overflowing" to the left.

HTML

<div class="page">
  <div class="outer-div">
    <div class="inner-div">     
      <p>This is short</p>
    </div>
  </div>
  <div class="outer-div">
    <div class="inner-div">     
      <p>This is much longer</p>
    </div>
  </div>
</div>

CSS

.page {
  width: 100px;
  border: 1px solid #000;
}

.outer-div {
  display: inline-block;
  max-width: 100%;
  overflow:hidden;
  white-space: nowrap;
}

.inner-div {
  float:right;
}