Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
1

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?

share|improve this question
2  
"because it's not semantic, etc etc." What?? Who said this?? –  Nathan Lee Jun 17 at 11:04
 
Read about <div> and <span> here : htmldog.com/guides/html/intermediate/spandiv and en.wikipedia.org/wiki/Span_and_div –  kevin Jun 17 at 11:04
1  
anything a <table> can do a <div> + CSS can do better –  Novocaine88 Jun 17 at 11:05
 
@Novocaine88 How would you translate colspan to divs and css? –  Mr Lister Jun 17 at 11:07
1  
@skip405 I know that css has nothing to do with semantics. I just wanted to emphasise that a lot of developers don't like to use tables for layouting. I want to do the same layout with CSS - because I would like to use CSS for styling and HTML for "semantics". –  Zsolt Jun 17 at 11:15
show 1 more comments

2 Answers

up vote 0 down vote accepted

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

share|improve this answer
 
Thanks! It works in Chrome but not in IE. But I think it's the solution for my problem, I'm just thinking about creating another question on why it doesn't work in IE. –  Zsolt Jun 17 at 11:43
 
Which version of ie? –  Pete Jun 17 at 12:16
 
@Zsolt, if you are not bothered about using display:table (I didn't see your second fiddle!) you can change your code and css to the following which will give you the same effect as the first fiddle without the tables: jsfiddle.net/fvZBA/6. It has ;less markup and css and is more browser compatible –  Pete Jun 17 at 12:55
 
Thanks! This solution is also fine! –  Zsolt Jun 17 at 13:15
up vote 0 down vote

First you do not need display;table to produce such a layout.
You need :

  1. min-height
  2. float {or inline-block if one tells it's bad practice too :) )
  3. 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 not so semantic to put <aside> in front in the flow, stick in it a <header> and see nowhere a <h1> <hX> ... :)

share|improve this answer
 
Thanks but it's not a solution for my problem. I want the sidebar to be scrollable independently of the main article. I've updated my sample: jsfiddle.net/fvZBA/2 Another issue that it works in Chrome, but not in IE :( –  Zsolt Jun 17 at 11:40
1  
i mistook about scroling areas . see update jsfiddle.net/aKzFZ/2 same issue with FF for your jsfiddle –  GCyrillus Jun 17 at 11:56
 
Thanks! This is great! –  Zsolt Jun 17 at 11:58

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.