Hello all,
been searching the net for an answer to this question which I am sure many have asked, but can’t seem to find anything, so as always I’ve come for the assistance of the kirupa gurus 
My situation is this; I have a div which contains images and text, and it is scrollable. I want the images and the text to sit side by side (well with a 10 or so pixel distance) and I want the image to float to the left hand side of the container div. I want to be able to simply copy and paste the code one below the other so that for new images and text I can simply change the content without having to change the code. Now, the problem is that the <span> for the text comes after the image, so it is placed below the image, now I can position it at top:-85px but that leaves an 85 pixel blank space at the bottom of the div (and of course when I copy and paste I have to keep minusing consecutive pixels and the space gets bigger).
here is my code:
<!--projectShowcase-->
<div style="width:340px; height:200px;position:relative; float:left; top:-20px; left:85px; overflow:scroll; overflow-x:hidden; scrollbar-base-color:#D1CFCF; scrollbar-arrow-color:#817A75; scrollbar-track-color:#C6C2C1; scrollbar-darkshadow-color:#D1CFCF; ">
<!--projectContainer-->
<div align="left" style="height:100px; width:300px; float:left;"><img src="Media/GIFs/hemiSyncLogo_v1.gif" />
<!--project1-->
<div align="left" style="width:200px; height:80px; position:relative; left:100px; top:0px"><span class="date">CLIENT: ????</span><br />
<span class="news" style="width:200px; position:relative; top:3px">???? approached us with a desire to produce an online store to distribute their many products online. We developed a comprehensive and practical e-commerce solution for them</span></div>
</div>
</div>
If someone could please let me know of a more effective way to create a image/text scroller in CSS that would be really great, because I get the feeling there must be a better way. Any help will be greatly appreciated. Thanks!
