Understanding Div layout

what to float, clear Media query added left boxes vertical

by karlgo

HTML

<div class="topbar">This is the top bar</div>
<div class="containter">
    <div class="box box1">Box 1<br>test</div>
    <div class="box box2">Box 2<br>test</div>
    <div class="box box3">Box 3<br>Test</div>
</div>


<div class="container">
    <div class="box box4">Box 4<br>Test</div>
    <div class="box box5">Box 5<br>Test</div>
</div>

        <!-- 
<div class="container">
    <div class="footer">Site footer text</div>
</div>

-->

CSS

.topbar {
    width: 100%;
    text-align: center;
    background-color: lightgreen;
}
.container {
    width: 100%;
    position: absolute;
    display: table-cell;
}

.box {
    width: 100px;
    height: 100px;
    /* display: table; */
    display: table;
    vertical-align: middle;
    text-align: center;
    border: solid 1px

}
.box1 { background-color: greenyellow;}
.box2 { background-color: gold;}
.box3 { background-color: lightblue;}
    
.box4 { background-color: grey;}
    
.footer {background-color: lightpink;}

/* for smaller screens */
@media screen and (max-width: 400px){
    .box {
        display: table-cell;
}