How do i use css to arrange text side by side without wrapping under each other

Hi all,

I am trying to solve the problem shown in the graphic. When the text wraps, it wraps beneath the number as depicted. But I do not wish this. I wish the text to wrap like in a bullet type way whereby the beginning of each line is on the same y-axis.

The html to produce the following is:

.sstories {
background:url("../images/vote_count.png") no-repeat 0 0;
padding-top:3px;
padding-right:13px;
float:left;
}

.count_total {
margin-left:8px;
color:#774525;
font-weight:700;
font-size:110%;
}

a.switchurl {
border-bottom:1px solid #eadfb4;
display:block;
margin-right:8px;
padding:0 0 4px 5px;
}

<div class="sstories">
	<span class="count_total"><a href="{$story_url}">{$link_shakebox_votes}</a></span>
</div>
	
<a href="{$story_url}" class="switchurl">{$title_short}</a>

Code (markup):

See pic example below of the incorrect wrapping.

 

a.switchurl {
border-bottom:1px solid #eadfb4;
display:block;
margin-right:8px;
padding:0 0 4px 33px;
}

Code (markup):

You need to set the left padding to 33px as above.

 

^because that's how far the bullet was pushing things in. Now everything will be as far in so no wrapping underneath.

 

yes.......