Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: hide element but keep width (and not height)

  • display:none will completely hide an element as if it now had a width and height of zero
  • visibility: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
like image 923
josch Avatar asked May 21 '13 20:05

josch


People also ask

How do you hide an element in CSS without affecting the layout?

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.

How do you make the hidden element not take up space?

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.

How do I completely hide an element in CSS?

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>

What is the best way to hide an element only on specific breakpoints without that element space on the page?

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.


1 Answers

#top         { width: 300px; height:0px; max-height:0px; }
#top:hover   {height: auto; width: 300px; }

http://jsfiddle.net/G5cgY/

like image 187
Axel Amthor Avatar answered Sep 23 '22 10:09

Axel Amthor