Stretching a variable-width div to a variable height parent - html

Question

I know this is a common question, but after having a good look around, none of the specified solutions seem to work.
The closest I've come is to using position: absolute, and setting 100% height. But this causes a problem in that the div to be made 100% high is of variable width, so I can't apply a padding to the rest of the content to move it out from behind the absolutely positioned element.
Here's a roughly drawn example of the final idea:
Note that the numbers on the left could be two or three digits. The dark grey area is what has to be the full height of the cell.
I'm beginning to think that just using a table is the easiest way out here. Perhaps taking the hit of having the grey areas the same width, whatever the largest number is.
Am I missing a much better (cross-browser, non-JS) way?

Answer 1

With such a simple layout, absolute positioning is definitely you best bet, so you were on the right track. The trick is not to set height:100% (because the height is variable), but to set top:0;bottom:0;. Also, you don't need to use a separate div for the number, you can just use a pseudo element - see the below snippet:
* { margin:0; padding:0; }
ul { font-family: sans-serif; list-style:none;}
ul>li { position: relative; min-height: 35px; border: 1px solid #000; padding: 10px 10px 10px 45px;}
ul>li:before { position: absolute; top:0; bottom:0; left:0; width: 40px; text-align: center; background: #999; content: attr(data-id); color: #fff; padding-top: 10px;}
<ul>
<li data-id="1">Lorem ipsum dolor sit ame</li>
<li data-id="37">Phasellus porta nulla urna, at ornare erat porttitor sit amet. Aliquam congue quam et aliquet sollicitudin. Duis volutpat metus tellus, at volutpat eros scelerisque non. Praesent metus lectus, malesuada eget metus vel, euismod dictum ex.</li>
<li data-id="12">Vestibulum ultrices augue libero, vitae sodales mi accumsan et. Etiam scelerisque, eros sed faucibus sollicitudin, lectus orci tincidunt sem, eu dapibus dui ante nec tortor. Nullam efficitur sapien et dolor aliquet bibendum. Nunc rhoncus augue at ligula sagittis, nec posuere urna lobortis. Nunc faucibus ipsum dolor, nec egestas nunc dapibus nec. Quisque sit amet suscipit est. Quisque sollicitudin tempus tincidunt. Mauris vitae est condimentum, sagittis metus vel, pellentesque turpis.</li>
</ul>
EDIT
This is the way to do it with non-fixed widths (and using display: table and still using pseudo elements). I would still opt for the position: absolute way because I think the layout looks better, but here it is. In CSS, there's about a thousand ways to skin a cat.
* { margin:0; padding:0; }
ul { font-family: sans-serif; list-style:none;}
ul>li { display: table; position: relative; border: 1px solid #000; width: 100%;}
ul>li>div { display: table-cell;padding: 10px; }
ul>li:before { display: table-cell; padding: 10px; text-align: center; background: #999; content: attr(data-id); color: #fff; padding-top: 10px;}
<ul>
<li data-id="1"><div>Lorem ipsum dolor sit ame</div></li>
<li data-id="37"><div>Phasellus porta nulla urna, at ornare erat porttitor sit amet. Aliquam congue quam et aliquet sollicitudin. Duis volutpat metus tellus, at volutpat eros scelerisque non. Praesent metus lectus, malesuada eget metus vel, euismod dictum ex.</div></li>
<li data-id="12"><div>Vestibulum ultrices augue libero, vitae sodales mi accumsan et. Etiam scelerisque, eros sed faucibus sollicitudin, lectus orci tincidunt sem, eu dapibus dui ante nec tortor. Nullam efficitur sapien et dolor aliquet bibendum. Nunc rhoncus augue at ligula sagittis, nec posuere urna lobortis. Nunc faucibus ipsum dolor, nec egestas nunc dapibus nec. Quisque sit amet suscipit est. Quisque sollicitudin tempus tincidunt. Mauris vitae est condimentum, sagittis metus vel, pellentesque turpis.</div></li>
</ul>