[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