Absolute positioned and fill parent height - is it possible?


I am trying to fill the parent height with the color bars, but they are absolute positioned to place them in the top right corner. Is that possible? It has to adapt if the headline is in 1 or 2 lines so the bars can't be a fixed height.
How should I fix this?

See the image and this fiddle.
enter image description here

Css for the color columns: (see the rest of the css in fiddle)

.header .colorColumn {
    width: 18px;
    height: 70px;
    float: right;
.header .trackColors {
    position: absolute;
    right: 0;
    top: 0;

A extra question:
How can I make the bars show behind the text but above the gray background? It is tricky with z-index because then you need both layers to be absolute positioned but then it would be difficult to have any code below the header..

Update 1:
The color columns count is dynamicaly - so it might contain 5 columns - how to make it work with that in mind?

Problem courtesy of: Morten Holmgaard


May I suggest a different approach all together? It seems to me that you are adding elements to your DOM (.colorColumn, .trackColors) purely for styling. This is considered bad practice, as markup and styling should be completely separated.

If all you want to do is add two colored stripes, then I suggest you use a box-shadow instead. Something like this:

header {
    color: #fff;
    background: #777;
    padding: 8px;
        inset -10px 0 0 red,
        inset -20px 0 0 green;

There are plenty more ways to do this (gradients, pseudo-elements :before and :after, combination of a border and an outline, ...), this is just an example of how I would do this. It doesn't really matter how you do it, as long as you don't have to change your markup for it!

and a demo: http://jsfiddle.net/y0jw9x17/

Solution courtesy of: Pevara


Like that? Absolute position of parent and height : 100% of colorbars...

Here you go: http://jsfiddle.net/StartStep/jj5b2gnq/5/

.programDetails .header {
    background-color: #404040;
    color: #e6e7e8;
    font-weight: bold;
    font-size: 22px;
    position: relative; /* As a reference point for absolute positioned bars */
.programDetails .titles {
    padding: 10px 36px 10px 20px;
.programDetails .header .sub {
    font-weight: normal;
    font-size: 14px;
.header .colorColumn {
    width: 18px;
    height: 100%; /* Fills the entire height */
    float: right;
.header .trackColors {
    position: absolute;
    right: 0;
    top: 0; bottom: 0  /* To stretch the element vertically */

JS solution for padding: http://jsfiddle.net/StartStep/jj5b2gnq/6/

$(document).ready(function() { //run as soon as possible
    var columnsWidth = $('.header .trackColors').width(); //get width of columns
    $('.programDetails .titles').css("padding-right", columnsWidth); //set the right padding-left
Discussion courtesy of: KARC

I had the same problems before, I solved them this way:

to fill a parent with a absolute position: I use %, height: 100%;

I not use float: right; it makes me a headache, to position something to the right side I use text-align: right;

Discussion courtesy of: Lord_Gama

This recipe can be found in it's original form on Stack Over Flow.