Within my HTML document, I have the following structure:
<div id="content">
<div id="wrapper">
<div id="steps">
<form id="formElem" name="formElem" action="" method="post">
<fieldset class="step">
<legend>General Information </legend>
</fieldset>
<fieldset class="step">
<legend>Medical History</legend>
</fieldset>
</form>
</div>
<div id="navigation" style="display:none;">
<ul>
<li class="selected">
<a href="#">General Information</a>
</li>
<li>
<a href="#">Medical History</a>
</li>
</div>
</div>
The associated CSS file is as follows:
#content{
margin:30px auto;
text-align:center;
width:900px;
position: relative;
height:100%;
}
#left{
position: absolute;
z-index: 1;
margin-top:10px;
margin-left:30px;
text-align:center;
width:170px;
color:#000000;
height:500px;
-moz-box-shadow:0px 0px 13px #aaa;
-webkit-box-shadow:0px 0px 13px #aaa;
box-shadow:0px 0px 23px #aaa;
background-color:rgba(300,250,250,0.5);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#wrapper{
-moz-box-shadow:0px 0px 13px #aaa;
-webkit-box-shadow:0px 0px 13px #aaa;
box-shadow:0px 0px 23px #aaa;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:2px solid #fff;
//background-color:#f9f9f9;
background-color:rgba(220,220,220,0.5);
width:1000px;
height:100%;
overflow:hidden;
}
#steps{
width:1000px;
height:520px;
overflow: auto;
/* overflow: scroll;
overflow: */
}
.step{
float:left;
width:1000px;
/* height:600px; */
overflow-y: auto;
/* overflow:-moz-scrollbars-vertical; */
/*height:320px;*/
}
#navigation{
height:40px;
background-color:#e9e9e9;
border-top:1px solid #fff;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
#navigation ul{
list-style:none;
float:left;
margin-left:10px;
}
#navigation ul li{
float:left;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
position:relative;
margin:0px 2px;
}
#navigation ul li a{
font-size: 10px;
display:block;
height:40px;
background-color:#444;
color:#777;
outline:none;
font-weight:bold;
text-decoration:none;
line-height:40px;
width: auto;
padding:0px 5px;
border-right:1px solid #fff;
border-left:1px solid #fff;
background:#f0f0f0;
background:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(240,240,240)),
color-stop(0.55, rgb(227,227,227)),
color-stop(0.78, rgb(240,240,240))
);
background:
-moz-linear-gradient(
center bottom,
rgb(240,240,240) 9%,
rgb(227,227,227) 55%,
rgb(240,240,240) 78%
)
}
I am looking to dynamically adjust the height of each fieldset based on the content present within them. How can this be achieved?