How do I make things move up in line when other items have been hidden?

I'm trying to get things to move up when I've hidden other objects, but right now there's just an empty space where the hidden item was. Thanks in advance! Also, here's a plunker with the page itself.

CSS:

#filters {
top: 10;
left: 0;
height: 50px;
width: 100%;
position: fixed !important;
z-index: 999999;
text-align:center;
}

#filters a:visited {
color:#ffffff;
text-transform:uppercase;
font-style:italic;
background:#6fc8de;
padding:3px 10px 3px 10px;
margin-left:3px;
margin-right:3px;
text-decoration:none;
letter-spacing:1px;
}

#filters a:hover {
color:#6fc8de;
background:#202020;
}

Javascript:

<script>
$(document).ready(function() {
  $('filters').click(function(e) {
    e.preventDefault();
    console.log('not: ',$(".media").not("." + $(this).attr("rel")));
    $(".media").not("." + $(this).attr("rel")).hide();
    $("." + $(this).attr("rel")).show(500);
  });
});
</script>

HTML

    <span class="media filtera"><div id="characterbox">
</div></span>
    <span class="media filterb"><div id="characterbox">
 </div></span>
    <div id="topbar">
    <div class="topbartitle">The Characters</div>
    <a class="topbarnavi" href="/">Home</a>
    <a class="topbarnavi" href="/message">Request</a>
    <a class="topbarnavi" href="/verses">Verses</a>
    <br><br>
    <div class="links">
    <div id="filters">
    <a href="#" rel="media" class="filters">All</a>
    <a href="#" rel="filtera" class="filters">Filter A</a>
    <a href="#" rel="filterb" class="filters">Filter B</a>
    </div></div></div>

I tried to break down the html to as little information as possible.

Solution

Setting the height of the hidden elements to 0 should shrink everything upwards. I usually do that instead of hiding element when possible.