Overflow Left

A DIV that is "overflowing" to the left.

HTML

<div class="outer-div">
  <div class="inner-div">     
    <div class="part1">
    This is part 1 -
    </div>  
    <div class="part2">
    This is part 2 -
    </div>  
    <div class="part3">
     This is part 3 -
    </div>  
    <div class="part4">
    This is part 4 
    </div>
  </div>
</div>

CSS

.outer-div {
  white-space:nowrap;
}

.inner-div {
  display: inline-block;
  overflow:hidden;
  white-space:nowrap;
}

.part1 {
  display:inline-block;
  float:left;
  background-color:red;
  white-space:nowrap;
}
.part2 {
  display:inline-block;
  float:left;
  background-color:blue;
  white-space:nowrap;
}
.part3 {
  display:inline-block;
  float:left;
  background-color:green;
  white-space:nowrap;
}
.part4 {
  display:inline-block;
  float:left;
  background-color:yellow;
  white-space:nowrap;
}