Question

I am attempting to create a 3-column layout using two text areas. I can set the text area width so that the columns look correctly, but the height is shrunken. I am looking for a solution that will work with HTML5-compatible browsers – older ones do not need to be supported. See 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;
}

How can I set the text area height in 3-column layout text to percentage, or with a layout format that makes the text area height look proportionate?

Answer 1

You forgot to define the wrap‘s height.

#wrap {
    height: 100%;
}

Fiddle