How to stretch div to size of parent li - css

Question

I have an ul/li where each li contains 2 div. One of the div ("category") can content text that can wrap on multiple lines. I'm trying to get the other div ("abbr") of that li to have the same height. Since the parent li is stretching, I tried height: 100% on the abbr but it doesn't stretch it to.
Any idea?
<ul>
<li>
<div class="abbr">ABC</div>
<div class="category">Long or short</div>
</li>
<li>
<div class="abbr">ABC</div>
<div class="category">Very long or very shortshort</div>
</li>
</ul>
And the css I used:
ul {
list-style: none;
width: 200px;
}
div.abbr {
float: left;
padding: 16px;
border: 1px solid red;
width: 30px;
background: blue;
text-align: center;
}
div.category {
/*float: left;*/
padding: 16px;
border: 1px solid red;
margin-left:64px;
}
Here's a fiddle if you wanna play with it: http://jsfiddle.net/P6UzU/

Answer 1

You can use CSS tables as Danield say above, or you can simulate the effect you want:
http://jsfiddle.net/P6UzU/3/
I put the blue background and the red border in the li tag, and a white background in the "category" class. Also, change the whole border in "category" to a border-left.

Answer 2

You could use css tables and remove the float:left on the first div
FIDDLE
CSS
ul {
list-style: none;
width: 200px;
display:table; /* <--- */
}
li
{
display:table-row; /* <--- */
}
div.abbr {
padding: 16px;
border: 1px solid red;
width: 30px;
background: blue;
text-align: center;
display:table-cell; /* <--- */
}
div.category {
/*float: left;*/ /* <--- removed */
padding: 16px;
border: 1px solid red;
margin-left:64px;
display:table-cell; /* <--- */
}

Answer 3

As others have said,
li a { display: block; }
should achieve what you’re after. But you must also remove any padding from the <li> and set it on the <a> instead. For example:
li { padding: 0; }
li a { display: block; padding: 1em; }

Answer 4

guys final i get the answer plz chk this....
html code:--
<ul>
<li>
<div class="abbr">ABC</div>
<div class="category">Long or short</div>
</li>
<li>
<div class="abbr1">ABC</div>
<div class="category1">Very long or very shortshort & Very long or very shortshort</div>
</li>
</ul>
CSS:--
ul {
list-style: none;
width: 200px;
}
div.abbr {
float: left;
padding: 16px;
border: 1px solid red;
width: 30px;
background: blue;
text-align: center;
}
div.category {
/*float: left;*/
padding: 16px;
border: 1px solid red;
margin-left:64px;
}
div.abbr1 {
float: left;
padding: 16px;
border: 1px solid red;
width: 30px;
background: blue;
text-align: center;
}
div.category1 {
/*float: left;*/
padding: 16px;
border: 1px solid red;
margin-left:64px;
}
Script:--
$(document).ready(function() {
var rightHeight = $('.category1').height();
$('.abbr1').css({'height':rightHeight});
and to this thing work out you have to add jquery/1.8.2..
Demo:--Fiddle