Test table layout

by bakhshi

HTML

<div class='main'>
    <header>header</header>
    <section>
        <div class='right'>right</div>
        <div class='left'>left</div>
    </section>
    <footer>footer</footer>
</div>

CSS

.main{
    width:500px;
    height:500px;
    display:table;
    background-color:blue;
    
}
footer, header{
    height:50px;
    background-color:yellow;
}

.right{
    float:right;
    width:50%;
    background-color:red;
}
.left{
    background-color:green;
}
.left,.right{
    height:100%;
}

section{
    overflow:auto;
    background-color:black;
}


.main >*{
    display:table-row;
}