george george - 6 months ago 24
HTML Question

CSS-based layout

Oh, the golden days of table-based layouts. Shouldn't we all go back there and screw semantics? (I know, I know, ...)

But I have a tricky website layout that is done in seconds and very few lines of code if I use a table. I have been pulling my hair over achieving the same with divs for two days now. Maybe someone can help.

This is the layout I want to achieve:
http://jsfiddle.net/reltek/13c6yfmh/

This is the code using tables, nice and easy:

<table border="1" width="100%">
<tr>
<th rowspan="2" width="30%" valign="top">
<h2>Main Navigation</h2>
<p>Might get really long, sometimes even longer than the Main Content and Footer combined.</p>
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
</ul>
</th>
<td valign="top">
<h1>Main Content</h1>
<p>Flexible, might get really long.</p>
</td>
</tr>
<tr>
<td height="3em">
<h2>Footer</h2>
<p>flexible height, should stay at the bottom of the page.</h2>
</td>
</tr>
</table>


My div-based HTML can be found here: http://jsfiddle.net/reltek/48rmshen/

The problem is: the footer on the right doesn't stay at the bottom, if the left column is longer than the right one.

Any help appreciated, thanks everyone!

Answer

In keeping with your display:table in your example the following works. Here is the jsfiddle http://jsfiddle.net/r4pg8p25/2/

You can add and subtract your empty paragraphs and see it expand and contract in sync with the left hand panel.

Hope this helps, Tim

<html>
    <header>
        <style>  

            html, body { text-align: justify; height: 100%; }

            .layout { display: table;  height: 100%;}
            .layout .columns-container { display: table-row;  height: 100%;}
            .layout .columns-container .column { display: table-cell;  height: 100%;}
            .layout .top { display: table-row;  height: 100%;}
            .layout .bottom { display: table-row;  height: 100%;}
            .layout .top .main{ display: table-cell;  height: 100%;}
            .layout .top .footer{ display: table-cell;  height: 100%;}

            .one-third { width:33%; float: left;  height: 100%;}
            .two-thirds { width:66%; height:100%; float: right; }

            .main-footer { height: 100%; }

            .nav { background: red; padding: 20px; }
            .main { background: green; padding: 20px;  height: 100%; }
            .footer { background: brown; padding: 20px; height: 150px; }

        </style>
    </header>
    <body>
        <div class="layout">
            <div class="columns-container">
                <div class="column one-third">
                    <div class='nav'>
                        <h2>Main Navigation</h2>
                        <p>Might get really long, sometimes even longer than the Main Content and Footer combined.</p>
                         padding-bottom:100%; margin-bottom:-100%;
                        <ul>
                            <li>Nav 1</li>
                            <li>Nav 2</li>
                            <li>Nav 3</li>
                        </ul>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>end</p>
                    </div>
                </div>
                <div class="column two-thirds">
                    <div class="layout main-footer">
                        <div class='top'>
                            <div class="main" role="main">
                                <h1>Main Content</h1>
                                <p>Flexible, might get really long.</p>
                                <p>end of text</p> 
                            </div>
                        </div>

                        <div class='bottom'>
                            <div class="footer">
                                <section id="colophon" class="site-info" role="contentinfo">
                                    <h2>Footer</h2>
                                    <p>flexible height, should stay at the bottom of the page.</p>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>        
    </body>
</html>