[CSS] בלוק חבוי

[Labs]

מה שיש לי זה כאילו שורות של פרטים ועשיתי שיעברו על שורה תפתח מתחת לשורה תמונה וכל שאר השורות ירדו למטה בהתאם לגובהה התמונה

עשיתי את הDIV שהתמונה בו חבוי הבעיה היא שגודל שלו עדיין נשמר יוצא כמו ריבוע ריק וכל השורות יורדות לי למטה בהתאם
אני רוצה לעשות שכל השורות היו צמודות ורק שעוברים על שורה מסויימת המרווח נוצר והתמונה מופיע

הקוד עצמו באתר:
HEAD

<script type="text/javascript">
function showHideTable(menuId){
    var obj=document.getElementById(menuId)
    obj.style.visibility=(obj.style.visibility=="visible"?"hidden":"visible")
}
</script>

והשורות עם התמונות:

<div class="titd" onmouseover="showHideTable('pic12');" onmouseout="showHideTable('pic12');">
<div style="width: 31px; float: right;">מיקום</div>
<div style="width: 45px; float: right;">שם מלא</div>
<div style="width: 55px; float: right;">עיר מגורים</div>
<div style="width: 30px; float: right;">ניקוד</div>
<div style="width: 30px; float: right;">דירוג</div>
<div style="width: 60px; float: right;">תמונה</div>
</div>
<div class="picd" id="pic12">
<img src="thumb.php?src=photos/sex.png" alt="אפרת גוש" />
</div>
<div class="titd" onmouseover="showHideTable('pic13');" onmouseout="showHideTable('pic13');">
<div style="width: 31px; float: right;">מיקום</div>
<div style="width: 45px; float: right;">שם מלא</div>
<div style="width: 55px; float: right;">עיר מגורים</div>
<div style="width: 30px; float: right;">ניקוד</div>
<div style="width: 30px; float: right;">דירוג</div>
<div style="width: 60px; float: right;">תמונה</div>
</div>
<div class="picd" id="pic13">
<img src="thumb.php?src=photos/KaTuHa.jpg" alt="שרה חיימוביץ" />
</div>

קוד CSS
לDIV של התמונה

.center #blocky .bg .picd {
	border:0px solid black;
	text-align: right;
	text-indent: 4px;
	margin: 1px 0 1px 0;
	width: 100%;
	height: 0%;
	visibility:hidden;
	display: hidden;
}

תודה לעוזרים

[miniature]

דבר ראשון זה display:none; ולא display:hidden;