Tumblr posts with FLOAT function help!

[leleoni]

I don't really understand HTML/CSS code,
My question is simple, this is my theme code :

#entry {{block:ifshowshadows}-moz-box-shadow: 2px 2px 2px #eee; -webkit-box-shadow: 2px 2px 2px #eee; box-shadow: 2px 2px 2px #eee{/block:ifshowshadows} text-align:; background-color:{color: post background}; margin-left:5px; margin-bottom:15px; overflow:hidden; float:left; width:300px;
{block:PermalinkPage}width:640px;{/block:PermalinkPage} height:100%; {block:PermalinkPage}height:100%;{/block:PermalinkPage} padding-left:4px; padding-right:4px; padding-top:4px; padding-bottom:4px;}
#entry img {width:300px; {block:PermalinkPage}width:610px;{/block:PermalinkPage} overflow:hidden;}
a img {border:none;}
#entry:hover .permalink {opacity: 1;}

And this is what I want :



The height is not fixed but the width is fixed.
Theres gaps between posts, how to remove the space?
What do I have to do?
I don't really care about posts order... But i dont want to have the height fixed...

{block:Posts}

{block:Text}
<div id="entry">
<span class="permalink"><a href="{Permalink}"><i>Permalink</i> | {NoteCountWithLabel}</a></span>
{block:Title}<div class="title">{Title}</div>{/block:Title}
<div style="margin-top:-5px;">{Body}</div>
</div>
{/block:Text}

{block:Photo}
<div id="entry">
<span class="permalink"><a href="{Permalink}"><i>Permalink</i> | {NoteCountWithLabel}</a></span>
{block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
<img src="{block:IndexPage}{PhotoURL-HighRes}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}" width="420"/><div style="margin-top:-4px; margin-bottom:-4px;"></div>
{block:IndexPage}</a>{/block:IndexPage}
{block:PermalinkPage}{LinkCloseTag}
{/block:PermalinkPage}
</div>
{/block:Photo}

{block:Photoset}
<div id="entry">
<span class="permalink"><a href="{Permalink}"><i>Permalink</i> | {NoteCountWithLabel}</a></span>
<div style="width:420px !important;">{Photoset-500}</div>
{block:PermalinkPage}+{/block:PermalinkPage}
{block:Ifshowcaptions}{Caption}{/block:Ifshowcaptions}
</div>
{/block:Photoset}

{block:Quote}
<div id="entry">
<div class="quote"><span class="permalink"><a href="{Permalink}"><i>Permalink</i> | {NoteCountWithLabel}</a></span> "<i>{Quote}</i>"
{block:Source}— <b>{Source}</b>{/block:Source}
</div></div>
{/block:Quote}

{block:Link}
<div id="entry">
<span class="permalink"><a href="{Permalink}"><i>Permalink</i> | {NoteCountWithLabel}</a></span>
<div class="h2"><a href="{URL}">{Name}</a></div>{blockescription}{Description}{/blockescription}
</div>
{/block:Link}

{block:Chat}
<div id="entry">
<span class="permalink"><a href="{Permalink}"><i>Permalink</i> | {NoteCountWithLabel}</a></span>
{block:Title}<i>{Title}</i>{/block:Title}<br>
{block:Lines}{block:Label}<b>{Label}</b> {Line}<br>{/block:Label}{/block:Lines}
</div>
{/block:Chat}

{block:Audio}
<div id="entry">
<span class="permalink"><a href="{Permalink}"><i>Permalink</i> | {NoteCountWithLabel}</a></span>
<div class="audio">
{AudioPlayerBlack}</div><br>
<div style="padding:2px; font-size:10px; text-align:left;font-style:italic;">{block:TrackName}{TrackName} by {/block:TrackName}{block:Artist}{Artist}{/block:Artist}</div>
{block:PermalinkPage}{block:ExternalAudio} <a href="{ExternalAudioURL}"> / download </a> </span>{/block:ExternalAudio}{/block:PermalinkPage}
</div>
{/block:Audio}

{block:Answer}
<div id="entry">
<span class="permalink"><a href="{Permalink}"><i>Permalink</i> | {NoteCountWithLabel}</a></span>
<div class="answer"><u>{Asker}</u>: {Question}</div><br>
<div style="margin-bottom:5px;">{Answer}</div> </div>
{/block:answer}

{block:Video}
<div id="entry">
<div class="video">
<span class="permalink"><a href="{Permalink}"><i>Permalink</i> | {NoteCountWithLabel}</a></span>
{Video-500}
{block:Caption}{Caption}{/block:Caption}
</div></div>
{/block:Video}



<center>{block:PermalinkPage}{block:Caption}<div style="margin-top:-5px;">{Caption}</div>{/block:Caption}{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}{block:HasTags} &middot; {block:Tags}<a href="TagURL">{Tag}</a>, {/block:Tags}{/block:hasTags}{/block:PermalinkPage}</center>
{blockate}

{block:IfDisqusShortname}
<script type="text/javascript">
//<![CDATA[
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{textisqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
{/block:IfDisqusShortname}

{block:PostNotes}
{PostNotes}
{/block:PostNotes}

{blockate}

{/block:Posts}

I heard about jquery masonry/vanilla masonry but I don't know how to use that and apply with my theme

[Excavator]

Hello leleoni,
Floats are kind of hard to get to stack like that. It might be easier if you use a two column layout... something like this -

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	background: #fc6;
}
#container {
	width: 850px;
	margin: 30px auto;
	background: #999;
	overflow: auto;
}
#left {
	width: 425px;
	float: left;
}
#right {margin: 0 0 0 425px;}
	#one, #two, #three, #four,
	#five, #six, #seven {
		width: 300px;
		margin: 10px auto;
		border: 5px solid #06f;
		text-align: center;
	}
		#one {height: 75px;}
		#two, #three, #five, six {height: 125px;}
		#four {height: 250px;}
		#seven {height: 225px;}
</style>
</head>
<body>
    <div id="container">
    	<div id="left">
            <div id="one">1</div>
            <div id="three">3</div>
            <div id="five">5</div>
            <div id="seven">7</div>
        <!--end left--></div>
        <div id="right">
            <div id="two">2</div>
            <div id="four">4</div>
            <div id="six">6</div>
        <!--end right--></div>
    <!--end container--></div>
</body>
</html>