Reproducing table layout with CSS display:table properties

Question

I have a nice layout which uses an HTML table to create a scrollable sidebar with a simple header. It works good, you can check it out here: jsFiddle demo

Here is the outline of my solution:

<aside>
    <table>
        <tr>
            <td>
                <header>
                    header
                </header>
            </td>
        </tr>
        <tr>
            <td class="secondcell">
                <div class="remaining">
                    ...
                </div>
            </td>
        </tr>
    </table>
</aside>
<article>
  ...
</article>

with the following CSS styles:

aside { 
    position: absolute; 
    left:0; top: 0; bottom: 0; 
    width: 200px; 
}

aside header { 
    height: 100px; 
}

aside table {
    width:100%;
    height:100%;
}

.secondcell {
    height:100%; 
    width:100%;
}

.remaining { 
    height: 100%; 
    background-color: red; 
    overflow-y: auto; 
}

article { 
    position: absolute; 
    left: 200px; 
    padding:10px; 
}

But unfortunately, I'm using HTML tables which a lot of people don't like, because it's not semantic, etc etc.

So I wanted to reproduce this layout with CSS formatting, but it doesn't work. You can check my attempts here: jsFiddle demo2

Maybe it isn't possible at all so I can't do it with CSS using only divs?

Answer 1

You can achieve this very simply through css

if you have the following three classes:

.table {display:table;}
.row {display:table-row;}
.cell {display:table-cell;}

you just replace all table tags with <div class="table"></div>
all tr tags with <div class="row"></div>
all td tags with <div class="cell"></div>

Your updated fiddle