Unexpected Whitespace in DIV - html

Question

I am going nuts with a whitespace problem inside a div. Two of my divs have unexplained whitespace but a third similar one has none. When I use the compatability mode of IE8 the whitespace disappears so I am guessing it is something to do with the CSS but for the life of me I can't seem to see what.
The page causing the issue is at http://www.infinitedreamers.co.uk/blog/
I have made one of the divs background white to show what I mean.
The snippet of the page is as follows:
<div id="id_front_main">
<div id="id_front_top">
<div id="id_front_top_title">
<h2>Latest Gallery Images</h2>
</div><!--#id_front_top_title-->
<table id="id_gallery_latest"><tr><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_Fae4.jpg" height="100" width="86" alt="Contemplation"/><p class="id_title">Contemplation</p></td><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_Fae6.jpg" height="100" width="100" alt="Emo Fae"/><p class="id_title">Emo Fae</p></td><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_IOTPM.jpg" height="100" width="88" alt="Invasion of the Saucer-Plushies"/><p class="id_title">Invasion of the Saucer-Plushies</p></td><td width="25%"><img src="http://www.infinitedreamers.co.uk/cpg132/albums/userpics/10001/thumb_StarPlushies.jpg" height="100" width="84" alt="Star Plushies"/><p class="id_title">Star Plushies</p></td></tr></table>
<div id="id_front_top_meta">
</div>
</div><!--#id_front_top-->
<div id="id_front_main_holder">
<div id="id_front_left">
<div id="id_front_left_title">
<h2>3d Art Latest</h2>
</div><!--#id_front_left_title-->
<div class="id_latest_posts">
<h3>Getting Started in 3d Art for free</h3>
<span>
<p>You want to create 3d art on the PC or Mac? This is a quick guide on how to achieve this for free.</p>
</span>
</div><!--id_latest_posts-->
<div id="id_front_left_meta">
</div>
</div><!--#id_front_left-->
<div id="id_front_right">
<div id="id_front_right_title">
<h2>Software Latest</h2>
</div><!--#id_front_right_title-->
<div class="id_latest_posts">
<h3>Poser Files Database</h3>
<p>Poser Files Database is designed to aid in the cataloging of content for Poser, DazStudio, Vue, and other similar 3D tools. It can be used simply as a way to find a particular file or to provide detailed information about all products in one location.</p>
<h3>File Renamer</h3>
<p>FileRenamer is a simple batch file renaming utility.</p>
<h3>Database Documenter</h3>
<p>Database Documenter generates easy-to-read and detailed documentation for SQL Server 2000/2005 databases with a few simple clicks.</p>
</div><!--id_latest_posts-->
<div id="id_front_right_meta">
</div>
</div><!--#id_front_right-->
</div><!--#id_front_main_holder-->
</div><!--#id_front_main-->
<div class="clear"></div>
The CSS that applies is as follows:
#id_front_main
{
text-align: center;
width: 100%;
}
#id_front_top
{
width: 100%;
background: url(images/fcover.jpg);
background-repeat: repeat-y;
}
#id_front_top_title
{
width: 100%;
background: url(images/ftop.jpg);
background-repeat: no-repeat;
height: 70px;
}
#id_front_top_meta
{
background: url(images/fmeta.jpg);
height: 31px;
padding-top: 4px;
}
#id_front_main_holder
{
width: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#id_front_left
{
width: 45%;
float: left;
/*background: url(images/flcover.jpg);
background-repeat: repeat-y;*/
background: white;
margin-bottom: 5px;
margin-top: 10px;
padding: 0 0 0 0;
}
#id_front_right
{
width: 45%;
float: right;
background: url(images/flcover.jpg);
background-repeat: repeat-y;
margin-bottom: 5px;
margin-top: 10px;
padding: 0 0 0 0;
}
#id_front_left_title, #id_front_right_title
{
width: 100%;
background: url(images/fltop.jpg);
background-repeat: no-repeat;
height: 70px;
}
#id_front_left_meta, #id_front_right_meta
{
background: url(images/flmeta.jpg);
height: 31px;
padding-top: 4px;
}
#id_front_main h2, #id_front_left h2, #id_front_right h2
{
background: transparent;
font: 24px Georgia,century gothic, Arial, sans-serif;
font-weight:normal;
padding-top: 10px;
padding-bottom: 5px;
}
#id_front_left p, #id_front_right p
{
padding: 0 10px 0 10px;
text-align: left;
}
James :-)

Answer 1

The whitespace is caused by the top-margin of the h2 in the boxes. To solve it:
#id_front_main h2, #id_front_left h2, #id_front_right h2 {
...
margin-top: 0;
}
It is always a good idea to reset the styles you are using to avoid these kind of problems when looking at your site in different browsers. There are standard reset style-sheets that can help you with that like:
http://meyerweb.com/eric/tools/css/reset/

Answer 2

Even we faced the similar type of issue.
If you are showing one div at a time, then you can use the below solution:
document.getElementById('myDiv').style.display = 'none';
to the div which is larger in size than the current div shown.
This really works well with IE10 webkit, Chrome Webkit and Safari Webkit.
Cheers,
Ankit