CSS Table Mockup: Table Properties

Question

I have a nice layout that uses an HTML table to create a scrollable sidebar with a simple title. It works well, you can check it 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 use HTML tables that many people don’t like because they are not semantic, etc. etc.

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

Maybe this is not possible at all, so I can not do this with CSS, using only divs?

Answer 1

You can achieve this very simply via css

if you have the following three classes:

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

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

Updated violin

Answer 2

At first you do not need to display a table to create such a layout.
You need:

• min-height
• float {or inline-block if someone talks about this bad practice :))
• overflow.

http://jsfiddle.net/aKzFZ/2

 html, body { height:100%; margin:0; } aside { float:left; min-height:100%; background:red; border: 1px solid black; width: 200px; margin-right:1em; display:table; } aside .remaining { display:table-cell; height:100%; } aside header { display:table-row; height: 100px; background:white; border-bottom:1px solid; } .scroll { height:100%; overflow:auto; } article { overflow:hidden; margin-right:1em; } 

I think that it is not so semantically to put <aside> in front of the stream, insert <header> into it and not see <h1> <hX> ... :)