How can I have text/objects stay in a div element? (Having the div "stretch" so all of the content will stay inside?)

With Internet Explorer when I have an effect with jQuery (slidedown) or a youtube video or something with oembed it will overlap or overflow over the text/content below. How can I have it so the div will 开发者_开发知识库"stretch so all of the text or video will stay inside the element?

I was looking at the generated DOM which is quite messy for Firefox and nothing like what's generated for Chrome. I suspect the curvy corners JavaScript and I'd suggest getting that out of the picture to confirm and then taking it up with the developer.

Internet Explorer 7 prefers certain elements have 'containers,' I'm not entirely sure why--but I've ran into the issue while trying to animate transparent PNG opacity in IE7.

Inside Dream.html the flash object (your video):

<object width="395" height="321">.. .. ..</object>

Should have a div around it, something like:

<div id="video_stage">  
     <object width="395" height="321">.. .. ..</object>
</div>

You don't have to give it an id but it's nice to keep things fairly semantic--plus just like commenting your code, it's a helpful when coming back to it.

. . .

I tested this, and it works in IE7/IE8.

Try clearing floats explicitly after the <object>. Something like this:

<object...> ... </object>
<div style="clear: both;"></div> <!-- added -->