Aligning expandable divs in row - html

Question

I am trying to align these blocks so they are expandable, but also inline. But I can't seem to get them to maintain their own space correctly. The layout I am going for is as follows
Where box 2, and 3 are auto expanding to fill in space on whatever resolution is viewing.
JSFiddle and JSFiddle 2
CSS / HTML:
.container {
width: 75%;
min-width: 1005px;
max-width: 1428px;
height: 330px;
margin: 0 auto;
background-color: gray;
}
.box1 {
float: left;
width: 455px;
height: 250px;
background-color: rgba(0, 0, 0, 0.75);
margin-right: 5px;
margin-bottom: 5px;
}
.box2 {
float: left;
width: 75%;
min-width: 340px;
height: 250px;
background-color: rgba(100, 50, 50, 0.75);
margin-right: 5px;
margin-bottom: 5px;
}
.box3 {
float: left;
width: 25%;
min-width: 190px;
height: 250px;
background-color: rgba(50, 50, 100, 0.75);
margin-right: 5px;
margin-bottom: 5px;
}
.box4 {
display: block;
width: 100%;
height: 60px;
background-color: rgba(50, 100, 50, 0.75);
}
<div class="container">
<div class="box1">Test</div>
<div class="box2">Test</div>
<div class="box3">Test</div>
<div class="box4">Test</div>
</div>

Answer 1

Here are three techniques
"Show code snippet" and run to see the complete example.
#1 - display: inline-block and calc
Compatibility: IE 9 + and all modern browsers. There are workarounds to get this working with IE8+ if needed.
The margins and fixed column are removed from the percentage calculation with width: calc(50% - 60px)
The divs are given min-height: 100% and will re-size with content. This is possible thanks to
html,body { height: 100%; }
The inline gap is removed by placing the closing div tags right next to the next opening tag. More info here.
Example
Note: The child selectors can be replaced with class selectors if wanted.
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 - display: table / display: table-cell
Compatibility: IE 8 + and all modern browsers
The top three divs are wrapped in a div with display: table
The top three divs are given display: table-cell
The fixed left div is given a fixed width
To allow the "cells" to evenly spread out the available width, the wrapper is given table-layout: fixed
The spacing between the top three divs is given by the border property. This is calculated into the percentage calculation thanks to * { box-sizing: border-box }
The bottom div is outside the wrapper and is given display: block. It is given a top border to create the faux margin
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 - The future! display: flex
Compatibility: IE 11, all modern browsers and Safari (with -webkit- prefix)
This is my favourite! Mainly due to the fact that I created it in about 3 minutes.
The top three divs are wrapped in a container with display: flex
The first div is given its fixed pixel width and flex: 0 0 auto. This tells the div not to grow or shrink
The 2 flexible divs are given flex: 1 and will grow and shrink as needed; automatically ignoring the fixed column
The last div is outside the flex container and is independent
The height and widths of the flexible divs are created with viewport width (vw) and viewport height (vh) units.
Refer here for a fantastic flexbox guide.
Example
* {
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>

Answer 2

Its not perfect but seems to do what you want with css tables.
<div class="table">
<div class="trow">
<div class="tcell">box1</div>
<div class="tcell">box2</div>
<div class="tcell">box3</div>
</div>
</div>
<div class="table">
<div class="tcell last">box4</div>
</div>
.table{display:table; width:100%; text-align:center;}
.tcell{display:table-cell; background:#000; color:#fff; min-height:100px; padding:20px; border:1px solid #fff; }
.trow{display:table-row; }
.last{ background:red; }
.trow .tcell:first-child{ width:300px; }
http://jsfiddle.net/fjsvnrLp/5/
You dont actually need the row