JSFiddle - React, Tailwind, and code Playground
HTML
<div id="main">
<div id="colOne" class="col">
<div class="image">your image</div>
</div>
<div id="colTwo" class="col">
<h1>form ipsum</h1>
</div>
<div id="colThree" class="col">
<h1>other column</h1>
</div>
</div>
CSS
#main {
display: table;
table-layout: fixed;
width: 100%;
height: 400px; /* for this fiddle. 100% height needed elsewhere */
}
.col {
/* IE6 and 7 will need: display: inline; zoom: 1 (and columns won't be 100% height but at least it'll be readable */
display: table-cell;
vertical-align: top;
width: 33.33%;
padding: 10px;
}
#colOne {
background-color: #C63D11;
}
#colTwo {
color: white;
background-color: #CD0000;
}
#colThree {
color: white;
background-color: black;
}
h1 {
margin: 0;
}
JavaScript
/* 3 columns of equal height and width.
Layout: IE8+ with fallback possible for IE6 and 7
Readability: all browsers, as it only uses colors and background colors ... */