Wrongly formatted div in Firefox

I have the following html and css codes:

The problem is that is properly displayed for IE10 & Chrome (at the right down corner of header_container section).

But in Firefox: is displayed in right-down corner of browser (or -Strange:)).

How to fix that behavior in Firefox?

Code here:

    <html>
    <head>
    <LINK href="LayoutWithDivsLikeTables3.css" rel="stylesheet" type="text/css">
    </head>
    <body>

    <div id="main_container">
        <div id="header_container">     
            <h1>Title Title Title</h1>      
            <div id="top_menu"> Top Menu | Top Menu | Top Menu | Top Menu | Top Menu |</div>
        </div>  

        <div id="row">
            <div id="left" >
                <h4>Left Col</h4>
                <p>...</p>
            </div>

            <div id="middle">
                <h4>Middle Col</h4>
                <p>...</p><p>...</p>
            </div>

            <div id="right">
                <h4>Right Col</h4>
                <p>...</p>
            </div>
        </div>
        <div id="footer">Footer</div>
    </div>

    </body>
    </html>

body    {
    margin: 0px; 
    width: 100%; 
    height:100%;
}

#top_menu   {
    position: absolute;
    bottom: 10px; right: 0px; 
    //width: 250px;
    font-size: 13px;
    padding:5px;
}

#header_container {
    width: 100%;
    height: 150px;
    border:  1px solid black;
    display: table-caption;
    text-align: center;
    position: relative;
}

#footer {
    width: 100%;
    height: 150px;
    border:  1px solid yellow;
    display: table-row;
}

#main_container {
    display: table;
    width: 100%;
    height: 100%;
    }

#row{
    //height: 33%;
    display: table-row;
    }

#left { background-color: blue; width: 150px;}
#right { background-color: red; width: 150px;}
#middle {  background-color: yellow;}

#left, #right, #middle 
{
    display: table-cell;
    border: 1px black;
}

Solution

You can change something in your html code to set the table to start with the content and let the header and footer to have only display:block.

http://jsfiddle.net/v1ycfn8m/1/

#top_menu   {
    position: absolute;
    bottom: 10px; right: 0px; 
    font-size: 13px;
    padding:5px;
}

#header_container {
    width: 100%;
    height: 150px;
    border:  1px solid black;
    display: block;
    text-align: center;
    position: relative;
}

#footer {
    width: 100%;
    height: 150px;
    border:  1px solid yellow;
    display: block;
}

#main_container {
    display: block;
    width: 100%;
    height: 100%;
}

#row{
    display: table-row;
}

#table {
    display:table;
    width:100%;
}

and

   <div id="table">
        <div id="row">
            <div id="left" >
                <h4>Left Col</h4>
                <p>...</p>
            </div>

            <div id="middle">
                <h4>Middle Col</h4>
                <p>...</p><p>...</p>
            </div>

            <div id="right">
                <h4>Right Col</h4>
                <p>...</p>
            </div>
        </div>
    </div>