Little help with CSS

[eluser]iainco[/eluser]
Hey guys, been trying to fix a tiny problem that is bugging me.

Screenshot here: http://img360.imageshack.us/my.php?image=problem.jpg

HTML:

Code:

<div class="news">
            <div class="arrowleft"><img src="images/left.png"></div>
            <div class="item"></div>
            <div class="itemalt"></div>
            <div class="item"></div>
            <div class="itemalt"></div>
            <div class="item"></div>
            <div class="itemalt"></div>
            <div class="item"></div>
            <div class="itemalt"></div>
            
            <div class="itemalt"></div>
            <div class="item"></div>
            <div class="itemalt"></div>
            <div class="item"></div>
            <div class="itemalt"></div>
            <div class="item"></div>
            <div class="itemalt"></div>
            <div class="item"></div>
            <div class="arrowright"><img src="images/right.png"></div>
        </div>

CSS:

Code:

.news {width:680px; height:140px}
.arrowleft {float:left; width:20px; height:140px;}
.arrowright {float:left; width:20px; height:140px;}
.item {float:left; width:80px; height:70px; background:#1a7bad}
.itemalt {float:left; width:80px; height:70px; background:#4f9ec4}

I'm using BlueprintCSS but not using the grid, so I've got their reset, typograhpy.

Need the arrowright to sit correctly like the left arrow.

I thought if I gave all divs dimensions in pixels it should all come together.


Also, text will be displayed inside each of the "item" and "itemalt" divs. I'm trying to think of a way to limit how many characters and be able to end the text with "...".

I know I can use overflow:hidden, but that will mean the remaining text is just cut off rather than showing that the text is incomplete.