Jump to content

IFrame width


Recommended Posts

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!!

Link to post
Share on other sites

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.

Link to post
Share on other sites

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>

Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...