Iframe in div hiding everything below it [Archive]

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:

<style type="text/css">

</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.

Wrapped the code in
tags

BLiZZaRD

01-09-2008, 01:45 AM

Try this:

#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

Try this:

#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? :confused:

Anyway have a look at the Iframe 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.