Question

I’m trying to build a screen like this:

How can I put my span and anchor elements to grow in height to be with same height of the li?

I already started with this example http://jsfiddle.net/Gh6mB/1/

My center column should expand in height and width. The left and the right column should expand in height but should keep the width fixed.

Is there anything I can do to simplify this?

Answer 1

I modified the css to match the <table><tbody><tr><td> structure, because you had a four level nesting. I had to add a wrapper div to the first table between the li and the spans:

http://jsfiddle.net/Gh6mB/8/

#ListaEventosPorMes ul.vermelho {
    display: table;
}

#ListaEventosPorMes ul.vermelho li {
    display: table-row-group;
}

#ListaEventosPorMes ul.vermelho li div,
#ListaEventosPorMes ul.vermelho li a {
    display: table-row;
}

#ListaEventosPorMes ul.vermelho li   span {
    display: table-cell;
    height: 74px;    
}