How do I stop a parent DIV from stretching when I put an iFrame into it?

I won't post the code directly but you can see it here: http://markbr开发者_如何学Cewerton.co.uk/work.html

I have links which load an iFrame into a DIV when they are clicked, however, as you will notice, the parent DIV is stretched and goes down really far. I'm pretty new to all this, so could you explain how I can fix it?

Cheers

---

The first part is the setup the bounds of the div by using the height and width styles.

After that set the overflow style.

Overflow has different values. Auto will likely get your the desired result. http://programming.top54u.com/post/HTML-Div-Tag-Overflow-CSS-Style-Scrollbars.aspx

---

Try this (if you want scrollbars):

#yourdiv {
  height: 300px; /* fixed height */
  overflow: scroll;
}

...or this (if you want to just clip the content):

#yourdiv {
  height: 300px;
  overflow: hidden;
}

Edit: You can also fix the height of the <iframe> itself:

#youriframe {
  height: 300px;
}