I am tasked with creating an ASP.NET MVC page that will display a template of controls. The controls will be retrieved from an XML file. One issue I am facing is that the number of controls is not fixed, so the page height needs to be dynamic. Our site has a blue background and the page itself should be white. However, when I add many controls to the page, they end up overlapping on the blue background. I have tried setting the height using "height:85%" and "height:auto", but it doesn't seem to work. Below is my CSS code:
#main-content
{
padding:0px 0px 25px;
width:747px;
position:relative;
-moz-border-radius:6px;
-webkit-border-radius:6px;
height:85%;
}
The HTML file structure looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="ctl00_Head1">
<link href="../Content/customize.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main-content">
<div>
<div style='left:20px;top:80px; position:absolute;' >Name</div>
<div style='left:80px;top:80px; position:absolute;' ><input id='Text1' type='text' value='Mr.Temp'/></div>
<div style='left:20px;top:210px; position:absolute;' ><input id='Chk1' type='checkbox' value='Check One' checked/>Check One</div>
<div style= 'left:20px;top:340px; position:absolute;' ><input id='Radio1' type='radio' value='OptionOne' />OptionOne</div>
<div style='left:260px;top:80px; position:absolute;' ><image id='image1'/></div>
<div style= 'left:118px;top:340px; position:absolute;' ><input id='Radio1' type='radio' value='OptionTwo' checked/>OptionTwo</div>
<table border='1' style='width:400px;'><caption>TempTable</caption>
<tr align='left' valign='top'>
<th align='left' valign='top'>Name</th>
<th align='left' valign='top'>Age</th>
<th align='left' valign='top'>Address</th>
</tr>
<tr align='left' valign='top'>
<td align='left' valign='top'>Mr.A</td><td align='left' valign='top'>30</td><td align='left' valign='top'>TownshipA</td>
</tr>
<tr align='left' valign='top'>
<td align='left' valign='top'>Mr.B</td><td align='left' valign='top'>40</td><td align='left' valign='top'>TownshipB</td>
</tr>
<tr align='left' valign='top'>
<td align='left' valign='top'>Mr.C</td><td align='left' valign='top'>50</td><td align='left' valign='top'>TownshipC</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Please provide guidance on how to address this issue with some examples.
Regards,
Indi