Hidden divs taking up space

Question

I've set up all my navigation for my website as hide.show divs (using behaviours). It all works pretty well, but I've now realised the problem of the divs taking up space even when they're hidden, extending the height of my wrapper far too much.

I really want the height to extend and contract according to the amount of content on display.

http://shanuea.lockernerd.co.uk/camel/

The divs are absolutely positioned and set to visibility:hidden. Any help appreciated, please let me know if you need more info.

Ingrain

possible duplicate of How to hide elements without having them take space on the page? – Additory

You should mark @Stefans answer as correct =) – Tawnatawney

Answer 1

Use display:none instead of visibility:hidden if you want the divs to take up no space when they are not displayed.

Lexicography

I'm using display:none !important; in a @print media query to hide the nav but its leaving a big empty space on the left of the page (its a vertical menu on left). Any idea to check for? – Pegmatite

Maybe it's not caused by the nav but something else? – Lexicography

Found #18555685 and was able to get it working with div.content { width: auto; } – Pegmatite

Answer 2

Just a reminder to future googlers:
I had some <span> tags which I wanted to hide from visitors. Behind each <span> was a <br>. The <br> tags made it look like the <span> tags were still taking up space after setting their display property to none.

Moneylender

This was the problem for me: those <br/> tags that I forgot. My solution was to change my <span> to a <div> so that it automatically has display: block. – Caulk