Internet Explorer and Empty Div Elements

Internet Explorer (both 6 and 7) has a niggly habit of rendering vertical spacing due to an empty div element e.g. <div id=”testdiv”></div> renders as vertical whitespace in IE but not in Firefox or Opera. It would be easy to prevent this happening by using CSS to hide the div using “display:none” however what if on certain pages content will appear in that div for example when loaded via dynamic code such as PHP? We want IE to hide the div when its empty but show all the content correctly when so loaded. The solution is blank HTML comments. Simply by popping in <!– –> at the beginning of your div code will cause IE to hide the div if there is no further content e.g. <div id=”testdiv”><!– –> dynamic content follows</div>. Negative margins begone!