Layout

by crmckenzie

HTML

<div id="page">
    <div id="header" class="stack-panel horizontal">
        <div id="title">Title</div>
        <div id="toolbar">Toolbar</div>
        <div id="search">Search</div>
    </div>
    <div id="top-panel" class="stack-panel horizontal">
        <div id="top-left">Top Left</div>
        <div id="top-middle">Top Middle</div>
        <div id="top-right">Top Right</div>
    </div>
    <div id="content">Content</div>
    <div id="footer">Footer</div>
</div>

CSS

/* 
    divs inside the horizontal stack-panel should float left
*/

.stack-panel.horizontal > div {
    float: left;
    margin-right: 15px;
}

/*
    The next div after the stack-panel should clear the float.
*/
.stack-panel + div {
    clear: both;
}

#header {
    background:orange;
}

#top-panel {
    background : beige;
    height: 50px;
}
    #top-left {
        background: darkyellow;
    }
    
    #top-middle {
        background: lightyellow;
    }
    
    #top-right {
        background: yellow;
    }

#content {
    background: lightgreen;
}

#footer {
    background: orange;
}