Discover Three Innovative Techniques
"Click to reveal code snippet" and execute to view the full demonstration.
#1 - Enhance Layout with display: inline-block and calc
Compatibility: Explore this technique on IE 9 + and modern browsers. Workarounds are available for IE8+ compatibility.
Avoid percentage calculation discrepancies by utilizing width: calc(50% - 60px) to eliminate margins and fixed columns.
Enable dynamic resizing of divs with min-height: 100%, thanks to html,body { height: 100%; }.
Eradicate inline gaps by strategically placing closing div tags adjacent to opening tags. For more insights, visit this link.
Sample Implementation
Note: Replace child selectors with class selectors as desired.
html,
body {
height: 100%;
margin: 0;
}
div {
background: #f50057;
min-height: calc(50% - 5px);
width: calc(50% - 60px);
display: inline-block;
vertical-align: top;
margin-right: 10px;
}
/*Fix first div*/
div:first-child {
width: 100px;
}
/*Remove third divs right margin*/
div:nth-child(3) {
margin: 0;
}
/*Top margin for last div*/
div:last-of-type {
width: 100%;
display: block;
margin: 10px 0 0;
}
<div></div><div></div><div></div><div></div>
#2 - Embrace Unprecedented Style with display: table / display: table-cell
Compatibility: Test this method on IE 8 + and contemporary browsers
Nest the top three divs in a container with display: table
Assign display: table-cell to the top three divs
Specify a fixed width for the left div
Use table-layout: fixed on the wrapper for even distribution of "cells"
Adopt border property spacing between top divs, adjusting percentages with * { box-sizing: border-box }
The bottom div outside the wrapper is set to display: block with a top border creating pseudo-margins
Illustrative Example
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
background: #000;
}
.table {
display: table;
height: 50%;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.table > div {
background: #f50057;
display: table-cell;
border-left: solid 10px #FFF;
}
.table > div:first-child {
border-left: none;
width: 100px;
}
.footer {
width: 100%;
display: block;
background: #f50057;
height: 50%;
border-top: solid 10px #FFF;
}
<div class="table">
<div></div>
<div></div>
<div></div>
</div>
<div class="footer"></div>
#3 - Step Into Tomorrow's World with display: flex
Compatibility: Discover the potentials of IE 11, modern browsers, and Safari (with -webkit- prefix)
This final technique stands out as a personal favorite due to its creation in just under 3 minutes!
Enclose the top three divs within a flex container employing display: flex
Define a fixed pixel width for the initial div along with flex: 0 0 auto to maintain its size
Allow flexibility for the other two divs using flex: 1 for adaptable growth and shrinking, independent of the fixed column
Position the last div outside the flex container for autonomous behavior
Utilize viewport width (vw) and viewport height (vh) units to determine heights and widths of flexible divs. Learn more about these length units here.
For an in-depth guide on flexbox properties, refer to this helpful resource.
Demonstrative Instance
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.flex {
display: flex;
height: 50vh;
width: 100vw;
}
.flex > div {
background: #f50057;
flex: 1;
margin-left: 10px;
}
.flex > div:first-child {
width: 100px;
flex: 0 0 auto;
margin: 0;
}
.footer {
width: 100%;
display: block;
background: #f50057;
height: calc(50vh - 10px);
margin-top: 10px;
}
<div class="flex">
<div></div>
<div></div>
<div></div>
</div>
<div class="footer"></div>