Question

Here is a fiddle showing the effect I wish to create

2 mandatory requisites:

1. i need a small spacing (padding/margin) between each highlighted
   row
2. the green highlight should only cover the length of the text on each line

I tried a mixture of <div><span>text</span></div> combos and could only ever get to 1. or 2. but never both, except with a table.

whilst im happy this content being in a table as it is tabular, im not happy with the end result as im splitting a paragraph across table rows which isnt cricket.

how to get the effect with just divs and spans?

Answer 1

Try this…

display: block;
float: left;
clear: both;

Here’s an example I made: http://jsfiddle.net/Gxhsq/