Little help with CSS

[eluser]Nick Husher[/eluser]
Try altering your structure and CSS to the following:

Code:

<div class="news">
<div class="arrow-left">
  <img src="images/right.png" />
</div>
<div class="news-items">
  ... add floating items here ...
</div>
<div class="arrow-right">
  <img src="images/right.png" />
</div>
</div>

Code:

.arrow-left { float: left; width: 20px; height: 140px; }
.arrow-right { float: left; width: 20px; height: 140px; }
.news-items { float: left; width: 160px; height: 140px; }

Basically, create an encapsulating box around the middle items. The issue is that floated objects cannot appear higher up in the document than their previous sibling. Your blue floating squares are wrapping around to a second line, invoking that rule.