What are the various ways to hide a <div>?
css
Solution
Several possibilities:
- `display: none` - This will cause the browser to not render it. It would also make it completely vanish from screen readers as well, so beware.
- `visibility: hidden` - This will cause the browser to render it, it wouldn't be visible, but would leave a space corresponding to the element's size.
- `position: absolute` and the send it to a ridiculous location (for example, `left: -99999px`; assuming parent's `overflow` isn't set to `auto` or `scroll`). - This works well when you want the element not actually visible, but still exist in the source or the DOM.
- Set `width` and `height` to 0, and ensure `overflow: hidden` - Same as above, the element would be completely invisible, but still exist at the DOM or source.
- `opacity: 0` - Would achieve the same effect of `visibility: hidden` only through different means (i.e. changing the actual opacity of the element).
Now this all depends on why you need it.
- Do you want to make the element completely disappear? `display: none` (and making it reappear with `display: block`) is your choice.
- Do you want to animate it? Going with `opacity: 0` or `width`&`height` is probably a better choice, perhaps with some JavaScript.
- Want it to be accessible to screen readers, but not actually visible (for example, hidden image captions?), going with `position: absolute; left: -99999px` works well.
Problem
Right, I am a CSS noob. I am trying to collate the various ways to hide a div. For example: ``` display:none; visibility:hidden; ``` Are there any more esoteric ones? forget about JQuery, JavaScript, events... I just to know the various CSS ways that a div with lots content and sub div can end up hidden? The reason why I want this is because I am looking at some code here and a div is invisible. Why I don't know? It might be something in the parent div. The div has various classes and this one looks like the offender - ``` .div-content { position: absolute; left: 70px; right: 0; top: 55px; bottom: 0; display: block; overflow-x: hidden; overflow-y: auto; padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0; margin: 0; /*width: 90%;*/ background-image: none !important; background-color: #F8F7F7; } ``` I narrowed it down to this class by just commenting in and out various other classes. When this class is commented out - I can see the div.