I've been struggling to pinpoint the reason why my page is displaying with a longer header than the actual page length. Even after adjusting the header size to be less than 100%, there is still excess white space overflowing beyond the edge of the page. Despite attempting to debug by removing various sections of code, I am unable to identify the root cause of this issue. Below is the HTML snippet for reference and you can find the complete CSS on JSFiddle through this link: http://jsfiddle.net/2qVUg/
<body>
<div id="header">
<img src="x" height="66" width="427" id="logo" />
<ul id="unordered">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><input type="text" /></li>
<li><img src="x" height="15px" width="15px" /></li>
</ul>
</div>
<div id="body">
<div id="main">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="controls"><form action="#" method="POST">Enter a Comment: <br /><textarea sizable="false"></textarea><br /><input type="submit" value="submit" /></form></div>
</div>
<div id="footer"><p></p></div>
</body>
Your assistance in resolving this matter is greatly appreciated.