Question

I need to do this in CSS

The red box is a <div> with several paragraphs <p>

I want to have the paragraph numbers to the right of the red box, and the paragraph numbers are aligned to the top of the respective <p>

Can I do this layout only with CSS?

I have tried so far to do this with javascript, recording the position of each paragraph element then positioning the numbers in the same y coordinate.

Thanks

Answer 1

You could do

<p style="position: relative;">
   <div style="width: 30px; position: absolute; top: 0; right: -30px">#1</div>
   Lorum ipsum...
</p>

You would probably want to use classes too, inline styles for example only.

Also, a valid argument is to use an ordered list. This is easily done by wrapping those p elements in li elements, which in turn will be wrapped by an ol element. Be sure to use ol { list-style: none; }, otherwise you will get 2 sets of numbers!

As for adding the numbers, you could use server side script and a DOM parser or use JavaScript

var p = document.getElementById('content').getElementsByTagName('p');

for (var i = 0; i < p.length; i++) {
    p[i].getElementsByTagName('div')[0].innerHtml = '#' + (i + 1);
}

Of course, you can also use jQuery

$('#content p').each(function(i) {

    $(this).find('div:first').html('#' + (i + 1));

});