vertical spacing

by bakhshi

HTML

<div class="main">
    <header>
        header
    </header>
    <span>sometext</span>
    <div>
        <div class="inner">
            <span>inner span</span>
            <div>
                <div class='chart-container'>
                    <div class='chart'>
                        innser div
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer>
        footer
    </footer>
</div>

CSS

.main{
    display:table;
    height:500px;
    background-color:cyan;
}
.main > *{
    display:table-row;
}
.inner{
    background-color:yellow;
    display:table;
    height:100%;
}
.inner >*{
    display:table-row;
}
header, footer{
    height:25px;
    background-color:silver;
}
.main>span{
    height:50px;
}
.chart-container{
    display:table-cell;
    background-color:orange;
}
.chart{
    height:150px;
    background-color:red;
}

JavaScript

/**
    the only problem with this fiddle is that IT IS AWESOME BUT IT DOES NOT WORK ON FUCKING IE
**/