21

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.

Shaun Wilson
  • 211
  • 1
  • 2
  • 3
  • possible duplicate of [How to hide elements without having them take space on the page?](http://stackoverflow.com/questions/2928688/how-to-hide-elements-without-having-them-take-space-on-the-page) – Oofpez Jan 08 '14 at 14:29
  • 1
    You should mark @Stefans answer as correct =) – Johan Hjalmarsson Jul 31 '15 at 11:52

2 Answers2

43

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

Stefan Haustein
  • 18,427
  • 3
  • 36
  • 51
  • 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? – Ryan Nov 19 '13 at 16:20
  • Maybe it's not caused by the nav but something else? – Stefan Haustein Nov 20 '13 at 00:14
  • Found http://stackoverflow.com/questions/18555185/setting-displaynone-div-inside-div-still-takes-up-space/18555232#comment29909071_18555232 and was able to get it working with `div.content { width: auto; }` – Ryan Nov 20 '13 at 01:02
7

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.

Webdevotion
  • 1,223
  • 13
  • 24
  • This was the problem for me: those `
    ` tags that I forgot. My solution was to change my `` to a `
    ` so that it automatically has `display: block`.
     – Jashaszun Jun 24 '15 at 20:13