IFrame width

[socken]

Hi everyone! I have some problems with an iframe:on the left side of my page, I have a menu:#menu{ float: left; width: 200px; margin-top: 0; padding-top: 0;}On the right side, I want an IFRAME which loads external pages. Now my Problem:If I set the width of the iframe to 100%, i goes underneath my menu, which I don't want. If I don't set the width, or set it to auto, it is very small. How do I set the Iframe width so it stays on the right hand side of the menu, but uses it's maximum space available???Thanks for any help!!

[socken]

OK, I think I figured that one out! I just put the iframe in a div, and set the margin-left of that div to a fixed value. If I then set the width-value of the iframe to 100%, it only takes the space it has..Now my next problem: (not quite shure if this still fits here...)How can I adjust the height of the iframe!? It should take as much space as it needs, so no scollbars should be visible.

[socken]

Continuying my monologe ;-)My solution does work, but like always : NOT IN IE!!!Doesn't IE undestand the margin-left tag!? Or do I have to set an additional align tag or something!? Please help me on this...

[aspnetguy]

IE should take the margin-left.Post the code for the entire page.

[socken]

This is my css so far... Don't laugh at the style, it's certainly not going to stay like this

#body { margin-left: 0; padding: 0; max-width: 95%;}#header { margin: 5px; padding: 10px 5px 10px 5px; border: 1px dotted blue; font-size: xx-large;}#menu{ float: left; width: 230px; margin-left: 5px; padding-top: 0;}#navigation { font-family: Verdana, Helvetica, Arial, sans-serif; font-weight: bold; width: 12em; padding: 0; background-color: #fafa28; margin-bottom: 10px;}#navigation ul { list-style: none;  margin: 0;  padding: 0;  border-bottom: 1px solid black;}#navigation ul li { margin: 0;  border-top: 1px solid black; border-left: 5px solid black; border-right: 1px solid black;}#navigation ul li a:link, #navigation ul li a:visited { display: block;  padding: 5px 2px 5px 0.5em;  color: black;  text-decoration: none;  width: 100%; }#navigation ul li a:hover { display: block; padding: 5px 2px 5px 0.5em; color: black; text-decoration: none; width: 100%; border-left: 10px solid black;}#rightSide { margin-left: 250px; left: 250px; margin-top: 0; padding-top: 0; height: 100%; max-width: 95%;}#subheader { border: 1px dotted blue; padding: 10px 5px 10px 5px;}#rightSide iframe{ width: 100%; height: 100%; border: 0; overflow: visible; margin-top: 10px;}#footer{ clear: both; width: 100%; border: thin dotted #0000FF; margin-top: 20px; padding: 5px;}

and here are the important parts of the html:

<div id="header">HEADER</div><div id="menu">   <div id="navigation">    <ul>      <li><a href="http://www.google.ch>google</a></li>    </ul>  </div>    <div id="navigation">   	 <ul>	<li><a href="http://www.google.ch" target="content">Google</a></li>	</ul>  </div>  <div id="navigation">  </div></div><div id="rightSide">  <div id="subheader"> SUBHEADER </div>	<iframe src="http://www.google.ch" name="content" id="content">  frame	</iframe>	</div><div id="footer"> footer </div>

[aspnetguy]

I looked at the code in IE6 and FF and it is aligned the same on the left. I am not sure what you are seeing...maybe post a screen shot of what you are seeing.Also the iframe only gets scrollbars when the frame is resized smaller than the content of the google page....this is normal...it is supposed to do that.