Height iframe in div problem

I'm having troubles fitting the iframe in the exact height of the div.
The problem isn't that is won't fill the complete div but it exceeds beyond the div.

This is what i have now

CSS

*{margin:0;padding:0}
html, body {height:100%;width:100%;position: relative;}

#header {
   height:100px;
   width:100%;
   background-color:#FF0000;
} 

#left {
    height:inherit;
    width: 250px;
    float:left;
    background-color:#0000FF;
}
#right {
    margin-left:250px;
    background-color:#FFFF00;
    height:inherit;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
</head>
<body>
<div id="header"></div>
   <div id="left">
       <!--<iframe src="http://www.microsoft.com" frameborder="1"></iframe>-->   
   </div>
   <div id="right">
   </div>
</body>
</html>

If you view this code in IE (or other browser) you will notice that the iframe is exactly 100px (the height of the header) too long. How can i fix this? Also any other comments on the code are appreciated.

UPDATE!!
I changed the code to show the area covered by the div's. If you view this code you will see that the left(blue) and right(yellow) div's extend beyond the 100% screen area. I want it to stay IN the screen area(no scrolling).

*{margin:0;padding:0} html, body {height:100%;width:100%;position: relative; } #splitter { box-sizing: border-box; -moz-box-sizing: border-box; height:100%; padding-top:100px; position:relative; } #header { margin-top:-100px; height:100px; width:100%; background-color:#FF0000; } #left { height:inherit; width: 250px; float:left; background-color:#0000FF; } #right { margin-left:250px; background-color:#FFFF00; height:inherit; }

hi, thanks for the reply. It was indeed not needed to put the iframe in table tags. Unfortunately putting position:relative in #right didn't fix the problem

pinkpanther 2010-09-15 18:11:41

It seems what you're trying to do gets owned by the box model.CSS3 adds the box-sizing option, which fixes it, but it seems only ie8 supports it (o_O)

david 2010-09-15 23:36:24

Thanks david for your help. I added the following line to your code in #splitter : " -webkit-box-sizing: border-box; " this will make it work in chrome and opera but not in IE7. I'm looking into the possibilty of determining the heigth using javascript. I will then see which works the best for me.

pinkpanther 2010-09-19 11:42:47

ansaurus

tags:

views:

answers:

Height iframe in div problem

related questions