I'm working on creating a 3-column layout with two text areas. The issue I'm facing is that when I adjust the width of the text areas to create columns, the height shrinks. I need a solution that will be compatible with HTML5 browsers - support for older browsers is not necessary. You can view an example on jsfiddle here.
HTML5
<div id="wrap">
<div id="content">
<div id="columnLeft">
<div id="toc">This is a table of contents</div>
</div>
<div id="columnCenter">
<textarea>This is edit 1.</textarea>
</div>
<div id="columnRight">
<textarea>This is edit 2.</textarea>
</div>
</div>
</div>
CSS
html, body {
height: 100%;
}
#wrap {
height: 100%;
}
#content {
height: 100%;
}
#columnLeft, #columnCenter, #columnRight {
position: relative;
height: 100%;
margin-right: 5px;
}
#columnLeft {
width: 10%;
float: left;
}
#columnCenter {
width: 40%;
float: left;
}
#columnRight {
width: 40%;
float: right;
}
textarea {
width: 100%;
min-height: 100%;
resize: none;
}
I'm seeking advice on how to set the text area height in a 3-column layout as a percentage or with a format that maintains proportional height within each column.