Struggling with CSS as I try to get my #wrapper DIV to adjust its size based on its contents. I've experimented with 100% height and min-height, but nothing seems to work. Could it be related to relative versus absolute positioning? Here's a snippet of my code for reference. Any advice would be appreciated.
(Updated by owner on 4/21/11)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS_Alpha_textArea</title>
<style type="text/css">
html {
height: 100%;
clear: both;
}
body {
margin: 0px;
padding: 0px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#FFF;
font-size: 100%;
line-height: 1em;
background-color: #gray;
background-size: 100%;
height:100%;
clear: both;
}
#wrapper {
margin-right: auto;
margin-left: auto;
/*background-color: #FFF;*/
width: 75%;
height:100%;
position: relative;
clear: both;
}
.screen {
margin-right: auto;
margin-left: auto;
background-color: #3B6AA0;
width: 75%;
height:100%;
filter: alpha(opacity=20);
/* CSS3 standard*/
opacity:0.20;
z-index: -100;
position: absolute;
left: 12%;
right: 12%;
clear: both;
}
.overlay {
margin-right: auto;
margin-left: auto;
width: 75%;
height:100%;
z-index: 100;
position: absolute;
left: 12%;
right: 12%;
padding: 0px;
clear: both;
}
#textArea {
height: auto;
width: 75%;
margin-right: auto;
margin-left: auto;
color: #FFF;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="screen"></div>
<div class="overlay">
<div id="textArea">
<p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br>
<p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br>
</div>
</div>
</div>
</body>
</html>