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?

take a look at this http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-heigh — lukadante3, Aug 30 '14 at 13:57
@lukadante3 I totally did not see the connection to the equal height columns problem, but of course, that's very similar. That would basically mean that there is no simple answer to this question. But I remember there being a simple answer for equal-height columns related to `display: table-cell;`, is there a similar solution here? — LuLeBe, Aug 30 '14 at 14:10
Perhaps I didn't understand the question but it seems your css is working fine for me in Chrome - http://jsfiddle.net/a1ses1ko/1/ I had to specify some height to the `li` to demonstrate that the div is in fact taking all available height. — Vishu, Aug 30 '14 at 14:21

score 3 · Accepted Answer · answered Aug 30 '14 at 18:44

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;
}

right-aligned div inside li should fill height

1 Answers1