How do I get css paragraph numbering to work in a scroll box? - css

Question

In order to solve an issue at work, I've been learning how to do paragraph numbering with css. So far, I am pleased with the results for standalone text passages. However, my requirement is to do the same in a scroll box with a vertical scrollbar.
As you can see here: http://jsfiddle.net/Lceewqj3/3/, I have gotten close by removing absolute positioning from the paragraph numbers, and adding a right margin, but I am still having a problem getting the paragraph starting left edge to be positioned correctly. My solution must work correctly for double-digit paragraph numbers as well as single, so the fixed right margin doesn't work, as you can see by scrolling down to paragraph 10. I tried adding a width property, but that didn't work either.
Note that modifying the existing passage-scrolling style is something I am not at liberty to do, so I need a solution that involves only manipulating the chapter and/or page styles.
Here is the css for the fiddle:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
//position: absolute;
margin-left: -30px;
margin-right: 14px;
color: #000;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}
p {
margin-top: 10px;
font-family: 'Raleway', sans-serif;
font-size: 17px;
line-height: 22px;
font-weight: 400;
}
.passage-scrolling {
padding: 0 5%;
height: 340px;
width: 89%;
border: 2px solid #999;
overflow-y: auto;
margin-bottom: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

Answer 1

Someone at work figured this out for me. The answer was simply to add float:left; and text-align:left; and remove the right margin from the .page p:before style. See the result here: http://jsfiddle.net/Lceewqj3/5/
Here's the final css that worked correctly:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
float: left;
text-align: left;
margin-left: -30px;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}