Convert this Table Layout to DIV Layout

Question

Can anyone help me with a DIV/CSS layout that looks like this table layout?

<table id="container">
    <tr>
        <td colspan="2" id="header">
            Header
        </td>
    </tr>
    <tr>
        <td rowspan="2" id="navBar">
            Navigation bar
        </td>
        <td>
            Main content
        </td>
    </tr>
    <tr>
        <td id="footer">
            Footer
        </td>
    </tr>
</table>

The css for the table is here:

<style type="text/css">
    #container
    {
        width: 100%;
        min-width: 800px;           
        border-collapse: collapse;
    }

    #header
    {
        height: 78px;
        background-color: Orange;
    }

    #navBar
    {
        width: 200px;
        background-color: Gray;
    }

    #footer
    {
        height: 50px;
        background-color: Silver;
    }
</style>

I'm having serious issues because, I cannot either:

• Make the parent div to grow automatically to it's child's height. (#container)
• Make all the child divs to evenly grow to the size of it's parent height. (#navBar, #main)
• Position a div always at the bottom of his parent (#footer)

I've tried some CSS generators with no success.

The key here is the rowspan is hard to emulate in CSS/div (for an experimented coder, inexperienced designer)

Answer 1

you can do this like that..

HTML

<div id="container">
<div id="header">Header</div>
<div id="navBar">Navigation bar</div>
<div id="content-here">content here
<div id="footer">Footer</div>
</div>
</div>

CSS

<style type="text/css">
    #container
    {
        width: 100%;
        min-width: 800px;           
        border-collapse: collapse;
    }

    #header
    {
        height: 78px;
        background-color: Orange;
    }

    #navBar
    {
        width: 200px;
        background-color: Gray;
    }

    #footer
    {
        height: 50px;
        background-color: Silver;
    }
</style>