Iframe in div hiding everything below it

**DonnaL** · 01-08-2008, 05:11 AM

I am relatively new to css and divs so bare with me please!
On my page there is a container which surrounds a logo, header, content (iframe) and a footer. The footer seems to be covered by the iframe. If I put anything else in the iframe div the footer shows up.
Here are snippets of my code:

Code:

<style type="text/css">
<!--
body,td,th {
   font-family:Verdana, Helvetica, Arial, sans-serif;
   colour:#feff7e; 
   font-size: 20;
   text-align: center;
} 
#container{
    width: 800px;
    border: 2px solid  #6f5d24;
    background-color: #feff7e;
    margin-top: 30px;
    margin-right:auto;
    margin-left:auto;
}
#mainFrameDiv {
    margin-right:auto;
    margin-left:auto;
}
#header {
    margin-bottom:0;
}
#footer {
    clear: both;
    padding: 0;
    margin-top: 0;
    background-color: #AF8E0B;
    height: 65px;
}
-->
</style>
<body>
<div id="container">
   <div id="cottageBabiesLogo">
      <img src="../lone_marigold_wide-1.jpg"
            width="800" height="250">
   </div>
   <div id="header">
      <p class="welcome">Welcome to Cottage Babies!</p>
   </div>
   <div id="mainFrameDiv">
      <iframe name=mainFrame scrolling='no' width='700' height='550' 
        align='center' frameborder=0 src="AboutMe.html">
   </div>
   <div id="footer">
      <a href="mailto:cottagebabies@earthlink.net">
      Contact Cottage Babies</a>
   </div>
</div>
</body>

Any thoughts? I have been staring at this a while and fiddling around with different margins, etc. Help!
Thanks in advance.

Edit: Wrapped the code in [code][/code] tags

**BLiZZaRD** · 01-09-2008, 01:45 AM

Try this:

Code:

#mainFrameDiv {
    margin-right:auto;
    margin-left:auto;
    overflow: auto;
}

This will make the contents of the iframe div scroll when it is larger than the space it is given, instead of overlapping.

**DonnaL** · 01-16-2008, 03:49 AM

Originally Posted by BLiZZaRD

Try this:

Code:

#mainFrameDiv {
    margin-right:auto;
    margin-left:auto;
    overflow: auto;
}

This will make the contents of the iframe div scroll when it is larger than the space it is given, instead of overlapping.

Thanks for responding (sorry .. I have been offline for a while).
Unfortunately, this does not help since when I change the container to have a large static height, i.e. lots of room for the footer:

#container{
width: 800px;
height: 4000px;
border: 2px solid #6f5d24;
background-color: #feff7e;
margin-top: 30px;
margin-right:auto;
margin-left:auto;
}
#mainFrameDiv {
margin-right:auto;
margin-left:auto;
overflow: auto;
}

It still doesn't show up, i.e. not a space issue.

**BLiZZaRD** · 01-16-2008, 02:46 PM

Why would you do that?

Anyway have a look at the Iframe code:

Code:

scrolling='no'

If you set the width and height and don't let it scroll it will push to those dimensions and push everything else down, then with your divs being new lines and extra spaces they get pushed off the page.. try also adding a yes to let the iframe scroll.

Thread: Iframe in div hiding everything below it

Thread Tools

Search Thread

Iframe in div hiding everything below it

Bookmarks

Bookmarks

Posting Permissions