Widget Layout Test

by Matthew Watzman

HTML

<div class="widget">
    <div class="widget-table-wrapper">
        <div class="widget-table">
            <div class="header-row">
                <div class="header"></div>
            </div>
            <div class="toolbar-row">
                <div class="toolbar-wrapper">
                    <div class="toolbar"></div>
                </div>
            </div>
            <div class="content-row">
                <div class="content"></div>
            </div>
        </div>
    </div>
</div>

CSS

body {
    margin: 0px;
}
.widget {
    position:relative;
    width: auto;
    min-height:250px;
}
.widget.max {
    position:absolute;
    height: 100%;
    width: 100%;
}
.widget-table-wrapper {
    position: absolute;
    top:0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
}
.widget-table {
    background-color: red;
    border-spacing: 0px;
    display:table;
    height: 100%;
    width: 100%;
    table-layout: fixed;
}
.header-row {
    display: table-row;
}
.header {
    background-color: green;
    height: 50px;
}
.toolbar-row {
    display: table-row;
}
.toolbar-wrapper {
    overflow: auto;
    overflow-y: hidden;
}
.toolbar {
    background-color: yellow;
    width: 700px;
    height: 50px;
}
.content-row {
    display:table-row;
    height:100%;
}
.content {
    background-color:blue;
    height:inherit;
    width:100%;
}