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>

I would give the count div a specified width, text-align right, and then give the switchurl class a left margin equal to the width of the sstories div.

Yes this seems to have worked, but i did not under stand the text-aling right bit.

I would give the count div a specified width, text-align right, and then give the switchurl class a left margin equal to the width of the sstories div.

Yes this seems to have worked, but i did not under stand the text-aling right bit.

Well, if you add a set width to the number class, you have to make it big enough to handle large numbers (like say 3 digits), but left-aligned numbers with only one digit will probably have too much space between it and the content:


1 Content Content Content Content


So by instead putting text-align right, the padding between the number and the content will always be consistent, and the number can grow without enacting a large gap between it and the content:


1 Content Content Content Content
1 2 Content Content Content Content
3 2 4 Content Content Content Content


That's totally a presentational issue and it's up to you whether or not you think that'd be something to consider--it's just probably how I'd do it.

Yes that sounds nice. I tried it, but the text-align: right; command seems to have no effect...its still stuck to the left as you depicted it.