Div With Paragraphs With Paragraph Numbers Aligned And Outside The Div (see Sketch)

I need to do this in CSS The red box is a

with several paragraphs

I want to have the paragraph numbers to the right of the red box, and the paragraph numbers

Solution 1:

You could do

<pstyle="position: relative;"><divstyle="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));

});

Solution 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><divclass="number">
      #1
    </div><divclass="clear"><div></li></ol>

Solution 3:

Here's what I'd do:

<div>
  <p>
     content1
     <span>#1</span>
  </p>
  <p>
     content2
     <span>#2</span>
  </p>
  <p>
     content3
     <span>#3</span>
  </p>
</div>

and the css looks like:

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

and now just play around with positioning.

Solution 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.75em0.75em0.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>

Share