White space issue with display:none

I'm using display:none to hide a div, but I see white space where the div would be in both Firefox and Safari (haven't tested on any other browsers). I feel like I'm missing something obvious. Any help would be greatly appreciated. Here's my code:

Styles:

Code:

.whiteRow { width:335px; padding: 8px 12px 8px 0px; } .blurb { font-family:Georgia, "Times New Roman", Times, serif; font-size:11px; color:#333333; display:none; }

HTML:

Code:

<div class="whiteRow"> <a href="#">Title goes here</a> <div class="blurb"> Blurb goes here </div> </div>

Hello

Seems to work ? :)

Code:

<!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" xml:lang="en" lang="en"> <head> <title>12345 12345 12345 12345 12345</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  <style type="text/css"> *{padding:0;margin:0;} .whiteRow { background:#ffffcc; width:335px; padding: 8px 12px 8px 0px; } .blurb { background:#ccffcc; font-family:Georgia, "Times New Roman", Times, serif; font-size:11px; color:#333333; display:none; } </style> <script type="text/javascript"> </script> </head> <body> <div class="whiteRow"> <a href="##">Title goes here</a> <div class="blurb">Blurb goes here</div> </div> </body> </html>

That's just a piece of my code. Here's some more context:

Code:

<style> #contentWrapper { padding: 8px 12px 0px 8px; border-style: none solid solid solid; border-color:#333333; border-width:1px; clear:both; } .whiteRow { width:335px; padding: 8px 12px 8px 0px; } .greyRow { width:335px; padding: 8px 12px 8px 0px; background-color:#f4f4f4; } .blurb { font-family:Georgia, "Times New Roman", Times, serif; font-size:11px; color:#333333; display:none; } .shareIcon { float:right; padding:8px 0px 8px 0px; background-image:url(../images/share_icon.gif); background-repeat:no-repeat; width:13px; height:13px; vertical-align:top; } </style> <div id="contentWrapper"> <div class="whiteRow"> <a href="#">Title goes here</a> <div class="blurb"> Blurb goes here </div> </div> <div class="shareIcon"> </div> <div class="clearDiv"> <div class="greyRow"> <a href="#">Title goes here</a> <div class="blurb"> Blurb goes here </div> </div> <div class="shareIcon"> </div> </div>

Hello

?
.whiteRow,.greyRow {float:left;clear:both;
width:335px;
padding: 8px 12px 8px 0px;
}
.greyRow {background:#f4f4f4;}

That doesn't seem to fix it. Any suggestions? Is there something I'm doing that will break the display:none?

Hello

is this what you want ? if not please a image how it is supposed to look, or even better a link to your page, Please :)

Code:

<!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" xml:lang="en" lang="en"> <head> <title>12345 12345 12345 12345 12345</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  <style type="text/css"> *{padding:0;margin:0;} #contentWrapper { padding: 8px 12px 0px 8px; border-style: none solid solid solid; border-color:#333333; border-width:1px; clear:both; min-height:1%; overflow:hidden; } * html #contentWrapper {height:1%;} .whiteRow,.greyRow{ clear:both; float:left; width:335px; padding: 8px 12px 8px 0px; } .greyRow {background:#f4f4f4;} .blurb{ font-family:Georgia, "Times New Roman", Times, serif; font-size:11px; color:#333333; display:none; } .shareIcon { float:right; padding:8px 0px 8px 0px; background-color:#ffffcc; background-image:url(../images/share_icon.gif); background-repeat:no-repeat; width:13px; height:13px; vertical-align:top; } .fc{height:0;overflow:hidden;display:block;} </style> <script type="text/javascript"> </script> </head> <body> <div id="contentWrapper"> <div class="whiteRow"> <a href="##">Title goes here</a> <div class="blurb">Blurb goes here</div> </div> <div class="shareIcon">x</div> <span class="fc"></span> <div class="greyRow"> <a href="##">Title goes here</a> <div class="blurb">Blurb goes here</div> </div> <div class="shareIcon">x</div> </div> </body> </html>