IE 8 and jquery problem

Question

I have such div:

<div class="box">
    <div id="myid" style="display:hidden;"> <p>some stuff here</p></div>
</div>

when I execute $("myid").slideToggle("slow"); on the html above (div "myid" is hidden) , if the content of has bigger height over box, my content overflows from the bottom of the "box" class, weirdly this doesn't happen with other browsers but IE8

How can I fix this issue so that when "myid" starts to display content, height of the .box resizes itself to fit the inner div.

CSS for my box:

.box {
    background:#fff;
    -moz-border-radius: 10px;
    -webkit-border-radius:10px;
    border-radius: 10px;
    border:1px solid #fff;
    margin-bottom:10px;
    padding:0;
    }

Answer 1

display:hidden; is not what you want. Try setting display:none; instead.

The main problem is that you want the box to have a minimum height, right? But it should get bigger to fit the inner div? You basically have to avoid setting an explicit height on the box. You could use min-height but it's not supported in IE. I would use a sibling to #myid that has an explicit height to keep the box at a minimum height. It could be 1px wide, for example, but 50px tall (min height of 50px, then). You would need to float your inner divs.

Here's a demo that does that: http://www.jsfiddle.net/ZKkB3/

The main limitation is that you've got that little bit of spacing on the left. You could fix that with negative margins, I'd imagine.