right-aligned div inside li should fill height - html

Question

I have the following simple piece of code:
<li>
<div class="stripe"></div>
linktext
</li>
my goal is to have the div on the right side of the li, filling its height while having a fixed width, say 10px. I tried this css, but it is not working:
li {
display: block;
}
.stripe {
float: right;
width: 10px;
height: 100%;
}
Something that does work would be:
li {
position: relative;
}
.stripe {
position: absolute;
height: 100%;
width: 10px;
right: 0;
}
However, I don't want to use css position attributes here. I thought it should be possibly by using a special type of display-property somewhere, but I haven't figured out where. I also read that height: 100%;needs a parent height to work. Indeed it does, setting the li-height to a px-value makes the div.stripe have that height, but my li should be variable in height. Is there any simple way to make this work?

Answer 1

Here's a solution that uses the latest flexbox specification and requires a modern browser: http://jsfiddle.net/a956kdfL/.
HTML:
<ul>
<li>
<div></div>
linktext
</li>
</ul>
CSS:
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
body {
padding: 10px;
}
ul > li {
display: flex;
flex-flow: row wrap;
}
ul > li > div {
flex: 0 0 10px;
outline: 1px solid red;
}
Here's a simpler solution that uses tables: http://jsfiddle.net/g7pxLcge/ and should work in older browsers.
CSS:
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
body {
padding: 10px;
}
ul > li {
display: table;
}
ul > li > div {
display: table-cell;
width: 10px;
outline: 1px solid red;
}
ul > li > a {
display: table-cell;
}