Header Techniques

by samih

HTML

<div class="header-container">
    <div class="month-header">
        <div>Feb</div>
        <div>Mar</div>
        <div>Apr</div>
        <div>May</div>
    </div>
    <div class="week-header">
        <div>Wk 14</div>
        <div>Wk 15</div>
        <div>Wk 16</div>
        <div>Wk 17</div>
        <div>Wk 18</div>
        <div>Wk 19</div>
        <div>Wk 20</div>
        <div>Wk 21</div>
        <div>Wk 22</div>
        <div>Wk 23</div>
    </div>
</div>

CSS

.header-container {
    width: 500px;
    white-space: nowrap;
}

.month-header: {
    width: 100%;
}

.month-header > div {
    display: inline-block;
    width: 25%;
    border: 1px solid black;
    margin-left: -5px;
    box-sizing: border-box;
}

.week-header {
    width: 100%;
}
.week-header > div {
    display: inline-block;
    margin-left: -5px;
    width: 10%;
    border: 1px solid black;
    box-sizing: border-box;
}