right-aligned div inside li should fill height

Question

I have the following simple piece of code:

<li>
  <div class="stripe"></div>
  <a href="#">linktext</a>
</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>
        <a href = "">linktext</a>
    </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;
}