css - float プロパティが「none」に設定されている場合、CSS の背景画像が消える

Question

それぞれが画面幅の約 3 分の 1 の一連の 3 つのボックスがあります。最初の 2 つのボックスの幅は 33.333% で、左にフロートされます。3 番目のボックスのフロートを削除しauto、残りの水平スペースを埋めるように幅を に設定しました。ただし、そうすると背景画像が消えてしまいます。この効果を示すFiddleを作成しました。

HTML は非常に単純です。

<div></div>
<div></div>
<div></div>

CSS は次のとおりです。

div {
  float: left;
  width: 33.333%;
  height: 120px;
  background: #EEE url('http://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Approve_icon.svg/200px-Approve_icon.svg.png') no-repeat center center;
  background-size: 100px 100px;
}

div:nth-child(2) {
  border-left: 1px solid black;
  border-right: 1px solid black;
}

div:nth-child(3) {
 float: none;
 width: auto;
}

何か案は？