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.

[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.

[eluser]Nick Husher[/eluser]
To get the elipsis effect, you can use a CSS rule that will appear in some browsers. Do a google search for "text-overflow ellipsis"

[eluser]iainco[/eluser]
Thanks a lot Nick, sorted everything.