Display none takes up space

Question

I'm having some trouble with my Pagination nav that is display:none. When I check on inspect element it takes no space, but for some reason, where the pagination nav is, there's an empty space that is not supposed to be there.

I've tried adding overflow:hidden, visibility:none, height:0, but none of it it's working.

Maybe it's something to do with position relative and absolute, I don't understand it very well yet.

themeexp1.tumblr.com

Edit: It's not the 14px margin, it's a much bigger margin Empty space: http://postimg.org/image/hiixhonoh/

HTML

<div id="content">

 <div class="container" id="{postID}">

  <div class="container-overlay"></div>

  <div class="photo inner">
    <a href="{permalink}">
      <img src="{block:indexpage}{PhotoURL-500}{/block:indexpage}{block:permalinkpage}{PhotoURL-HighRes}{/block:permalinkpage}" alt="{PhotoAlt}">
    </a>
  </div>
</div>

<nav id="pagination">
  <ul>
    {block:PreviousPage}<li><a href="{PreviousPage}">Previous page</a></li>{/block:PreviousPage}
    {block:NextPage}<li><a id="nextPage" href="{NextPage}">Next page</a></li>{/block:NextPage}
  </ul>
</nav>

</div>

CSS

#content{
margin: 0 auto;
position: relative;
}

.container{
margin-bottom: 14px;
}

.container-overlay{
width: 100%;
height: 100%;          
opacity: 0;
position:absolute;
}

.icons{
opacity: 0;
position: absolute;
left: 50%;
top: 50%;
width: 100%;
text-align: center;
}

#pagination{
display: none;
position: absolute; 
}

Please post the rendered HTML and not the template code. Also, a jsFiddle.net example might be useful here. — j08691, Aug 04 '14 at 17:27
Please could you give us a [working fiddle](http://jsfiddle.net/)? For what I can see there, the "empty-space" is the `margin-bottom : 14px` of `.container` class. — Kaiido, Aug 04 '14 at 17:36
Whatever algorithm that's positioning all the `.container` elements may not be accounting for "hidden" elements. — Nate Whittaker, Aug 04 '14 at 18:09
I've added some extra script, do you still see items overlapping? @Evan — Penny, Aug 04 '14 at 18:33

score 5 · Answer 1 · answered Aug 04 '14 at 17:30

5

It's hard to tell what you want without a demo, but there is space at the bottom because your .container div has margin-bottom: 14px;.

Example Fiddle

answered Aug 04 '14 at 17:30

TylerH

20,799
66
75
101

I know, but it's a space much bigger than that: themeexp1.tumblr.com – Penny Aug 04 '14 at 17:45
@user3906855 I don't see a huge space anywhere – TylerH Aug 04 '14 at 17:57
Whoops! I'll move this up to the OP – Evan Aug 04 '14 at 18:03
@user3906855 The issue may be with `masonry.js`, which appears to be how the images are loaded. – TylerH Aug 04 '14 at 18:23
@user3906855 That image seems to be positioned absolutely, `1503px` from the top. How is this number determined? If it's determined through masonry.js, then that's where the problem/answer lies. – TylerH Aug 04 '14 at 18:24
It is! But go to inspect element, find the nav and disable display:none, that extra space is exacly the nav's space. Any idea on how I can fix what mansory is doing? – Penny Aug 04 '14 at 18:27
@user3906855 Unfortunately that's a JS question, and my knowledge in JS is *extremely* limited. Feel free to edit your question (and add tags like JavaScript and Masonry.js (if that tag exists) to help locate the problem). – TylerH Aug 04 '14 at 18:29

Display none takes up space

1 Answers1