Div with paragraphs with paragraph numbers aligned and outside the div (see sketch)

Question

Hello. 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));

});

Answer 2

This should semantically be an <ol>.

In any case something like this might work:

ol 
{ 
  border-top: 1px solid red; 
  border-bottom: 1px solid red;
  border-left: 1px solid red; 
}
p { border-right: 1px solid red; padding: 10px 0; }
span.number { vertical-align: top; float: right; }
.clear { clear: both; }

<ol>
  <li>
    <p>
      content
    </p>
    <div class="number">
      #1
    </div>
    <div class="clear"><div>
  </li>
</ol>

Answer 3

Here's what I'd do:

<div>
  <p>
     content 1
     <span>#1</span>
  </p>
  <p>
     content 2
     <span>#2</span>
  </p>
  <p>
     content 3
     <span>#3</span>
  </p>
</div>

and the css looks like:

div {
    padding:10px;
    border:1px solid red;
    width:500px;
}
p { 
    position:relative; 
}
p span {
    font-size:30px;
    position:absolute;
    top:0;
    right:-60px;
}

and now just play around with positioning.

Answer 4

This answer builds on Graphain's answer (he's right on that OL should be used, since it's semantically correct). It uses jQuery to add the numbering.

jQuery

$(document).ready(function(){
  $("ol li").each(function(i){
    $(this).prepend('<span class="number">#'+(i+1)+'</span> ');  // Append the number (using prepend, but the CSS will put the number after the box
  });
});

CSS

ol {
  list-style: none;
  border: 1px solid red;
  overflow: auto; 
  width: 500px;
}

li {
  margin: 0.75em 0.75em 0.75em -28px;
}

.number {
  position:absolute;
  left: 560px;
}

HTML

<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt nisl a purus mollis tempor. Donec dapibus blandit purus at semper. Aliquam sit amet dolor at sapien gravida pharetra rutrum at libero.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt nisl a purus mollis tempor. Donec dapibus blandit purus at semper. Aliquam sit amet dolor at sapien gravida pharetra rutrum at libero.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt nisl a purus mollis tempor. Donec dapibus blandit purus at semper. Aliquam sit amet dolor at sapien gravida pharetra rutrum at libero.</li>
</ol>