three divs in a div

by karlgo

HTML

<div class="header">
    <div class="headerLeft">Left</div>
    <div class="headerMiddle">Middle</div>
    <div class="headerRight">Right</div>
    
</div>

CSS

.header {
    border: 3px solid orange;
    width: 100%;
    display: -webkit-flex;
    /* -webkit-box-orient: horizontal; */
}

.headerLeft {
    border: 2px solid chartreuse;
    -webkit-flex: 1;
}
.headerMiddle {
    border: 2px solid darkorchid;
    -webkit-flex: 1;
}
.headerRight {
    border: 2px solid darkorange;
    -webkit-flex: 1;
}



.body {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    border: 3px solid orange;
    width: 100%;
}
.thumbsPanel {
    border: 2px solid green;
    width: 100px;
    height: 100px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.thumb1 {
    border: 2px solid aqua;
}

.mainPanel {
    -webkit-box-flex:1.0;
    border: 2px solid darkred;
}