CODEWITHSUNDEEP
cssheightwidthhide
josch
josch

Reputation: 7154

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

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

Upvotes: 25

Views: 43509

Answers (2)

argentum47
argentum47

Reputation: 2382

using css

<a href="#box1">Show Box 1</a>|<a href="#box2">Show Box 2</a>|<a href="#hidebox">Hide All</a>

<div id="box1" class="box"> Contents of Box 1 </div>
<div id="box2" class="box"> Contents of Box 2 </div>

and css

.box{
border: 2px solid #ccc;
padding:20px;
margin:20px 0 0;
max-height:150px;
max-width:300px;
display:none;  }



.box:target{
    display:block;
}

and i found this fiddle quite a few months back, can be helpful: http://jsfiddle.net/DbXQs/

Upvotes: 1

Axel Amthor
Axel Amthor

Reputation: 11096

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

http://jsfiddle.net/G5cgY/

Upvotes: 9

Related Questions