Content Page

by Troy Johnson

HTML

<div class="flex-container">
<div class="flex-head">Header</div>
<div class="flex-content">Content</div>
<div class="flex-ads">Ads</div>
<div class="flex-foot">Footer</div>
</div>

CSS

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
}
.flex-head {
    background: #000;
    padding: 5px;
    width: 100%;
    margin-top: 0px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;}
    
.flex-content {
    background: #CCC;
    padding: 5px;
    width: 640px;
    margin-top: 10px;
    color: white;
    font-weight: normal;
    font-size: 2em;
    text-align: left;
}
.flex-ads {
    background: tomato;
    padding: 5px;
    width: 346px;
    margin-top: 10px;
    color: white;
    font-weight: normal;
    font-size: 2em;
    text-align: center;
}

.flex-foot {
    background: blue;
    padding: 10px;
    width: 100%;
    margin-top: 10px;
    color: white;
    font-weight: bold;
    font-size: 1em;
    text-align: center;
}