I have been trying to get this to work all day and feel like it should be much easier.

I have a flash object that I'd like to embed on a page. I did not make the flash object it was provided to me. The flash uses 100% height and width.

I've put the object code into a DIV on my site that holds the main content, the DIV has a set width value but not height (as the flash will expand depending on the height of the browser window). When viewed the flash is the correct width but the height is only about 150px tall.

I've discovered the problem is in using a doctype on my page:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
is what I am using. Apparently that causes issues in Mozilla browsers which is what I am currently testing in (Firefox 3.5). The solution I found is to use CSS to set the Height of the HTML and BODY tags to 100%, this sort of works.

The 100% BODY and HTML works only if the DIV containing my flash is the next level down (so the first DIV I use inside the BODY), this is not the case with my page. I have the Flash Container nested inside several other DIVs. If I set ALL of them to 100% height my flash container works perfectly but the rest of my site becomes screwed up.

Due to some effects and corners that I am using on the site the Flash needs to be inside several levels of DIVs. I can not move it inside a DIV closer to the HTML and BODY tags in order to make the 100% Height CSS trick work for it. Does anyone know of a way to make it so the flash will fill and expand the DIV it is in as necessary and still keep the Doctype for validation? I appreciate any input.

  • Are you adding padding/margin to any of the multiple wrapper divs? Gary Hepting over 9 years ago
  • Yes, the DIV holding the flash uses a small margin and padding and it's containing DIV uses padding. There is another DIV above that and then a Site Container that is the main DIV. Neither of those use padding, just an auto margin for Right and Left. Jim Quilty over 9 years ago
  • The URL given is showing "page not found - 404" error, do you have an updated one? o.k.w over 9 years ago

1 answer


Your nested divs can only be as tall as your parent div's max height. If your parent div's height is set to 150px, then the nested div's height (if given a height of 100%) will be set to 150px.

Answered over 9 years ago by louisstephens