display:none
will completely hide an element as if it now had a width and height of zerovisibility:hidden
on the other hand will hide an element but reserve a rectangle of the element's original width and height in the document.Is there a way through pure CSS, to hide an element such that it takes up zero height but its original width? Setting its height to zero doesnt work because I dont know to which height to set the element to once I want to show it again.
Specifically I want to achieve the following:
#top ul {take up zero height but original width}
#top:hover ul {restore original dimensions}
Edit: solved! The idea is to set height:auto
to restore the original height.
See here http://jsfiddle.net/yP59s/ for the full version or here the css:
ul {margin:0px}
#top {border:1px solid}
#top ul {height:0px;overflow:hidden}
#top:hover ul {height:auto;}
and the html:
<div id="top">
<h1>foobar</h1>
<ul>
<li>foo</li>
<li>bar</li>
</ul>
</div>
blubber
You can hide an element in CSS using the CSS properties display: none or visibility: hidden . display: none removes the entire element from the page and mat affect the layout of the page.
Look, instead of using visibility: hidden; use display: none; . The first option will hide but still takes space and the second option will hide and doesn't take any space.
Completely hiding elements can be done in 3 ways: via the CSS property display , e.g. display: none; via the CSS property visibility , e.g. visibility: hidden; via the HTML5 attribute hidden , e.g. <span hidden>
Probably the most straightforward one is to use a combo class. Maybe for this, we can call it “hidden.” Once we do that, we can set it to display: none — and that's it. Now only that element (or any other elements that have that combo class applied) will be hidden.
#top { width: 300px; height:0px; max-height:0px; }
#top:hover {height: auto; width: 300px; }
http://jsfiddle.net/G5cgY/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With