CSS HTML textarea in divs within divs max height minus header - css

Question

here is the HTML code i am using:
<div id="header">123</div>
<div id="editorcontent">
<div id="ta_a"><textarea style="resize: none;"><? echo $t1; ?></textarea></div>
<div id="ta_c"><textarea style="resize: none;"><? echo $t2; ?></textarea></div>
<div id="centerinfo">CONTENT 1</div>
<div id="clear"></div>
<div id="centerinfo">CONTENT 2</div>
<div id="ta_b"><textarea style="resize: none;"><? echo $u1; ?></textarea></div>
<div id="ta_d"><textarea style="resize: none;"><? echo $u2; ?></textarea></div>
</div>
and the CSS:
#editorcontent {
min-height: 400px;
min-width: 800px;
overflow: hidden;
position: relative;
height: auto;
width: 100%;
}
#ta_a {
position: relative;
width: 40%;
height: 50%;
float: left;
}
#ta_c {
position: relative;
width: 40%;
height: 50%;
float: right;
}
#ta_b {
position: relative;
width: 40%;
height: 50%;
float: left;
}
#ta_d {
position: relative;
width: 40%;
height: 50%;
float: right;
}
#centerinfo {
text-align: center;
position: relative;
width: 19.6%;
height: 40%;
display: inline-block;
}
#clear {
clear:both;
min-height: 10px;
}
#header {
height: 44px;
background: #D00000;
}
The problem is that the 2 times 50% from the textareas are not not looking at the header causing the page always to be too large in height...
Fiddle http://jsfiddle.net/5SD2U/

Answer 1

To accomplish this, you need either javascript/jQuery or a CSS hack. I made a fiddle with the CSS hack. It involves setting your #editorcontent div to 100%, adding a header_placeholder div, and setting the header's position to absolute. Also keep in mind that you will always have to manually set the height of the header and the placeholder to the same number.
Also you have to set the body and html to padding: 0, margin: 0, width: 100%, and height: 100%, else this probably won't work in all browsers.
Here is the working fiddle:
http://jsfiddle.net/5SD2U/1/
And here is the code for reference:
The HTML:
<div id="header">123</div>
<div id="editorcontent">
<div id="header_placeholder"></div>
<div id="ta_a"><textarea style="resize: none;">1</textarea></div>
<div id="ta_c"><textarea style="resize: none;">2</textarea></div>
<div id="centerinfo">CONTENT 1</div>
<div id="clear"></div>
<div id="centerinfo">CONTENT 2</div>
<div id="ta_b"><textarea style="resize: none;">3</textarea></div>
<div id="ta_d"><textarea style="resize: none;">4</textarea></div>
</div>
And the CSS
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#editorcontent {
height: 100%;
min-width: 800px;
overflow: hidden;
position: relative;
height: auto;
width: 100%;
}
#header_placeholder {
height: 44px; /* height of the header */
}
#ta_a {
position: relative;
width: 40%;
height: 50%;
float: left;
}
#ta_c {
position: relative;
width: 40%;
height: 50%;
float: right;
}
#ta_b {
position: relative;
width: 40%;
height: 50%;
float: left;
}
#ta_d {
position: relative;
width: 40%;
height: 50%;
float: right;
}
#centerinfo {
text-align: center;
position: relative;
width: 19.6%;
height: 40%;
display: inline-block;
}
#clear {
clear:both;
min-height: 10px;
}
#header {
height: 44px;
background: #D00000;
position: absolute;
width: 100%;