Trying to Float an iFrame, iFrame will not float:left causing the image with float:right to drop Options

[lintacious]

I want to have two columns. Left column will have a slideshow included in an iFrame, with two buttons below. The right column just has one long image.

Before the iFrame, this was working correctly. Now it seems that iFrame will not float left so the right float drops below. If iFrames cannot be controlled by any floats, is there a suggested workaround?

Here is what I am working with:

<div id="left">
<iframe src ="homepageslider/" width="725" height="400" frameborder=0 scrolling=no>
<p>Your browser does not support iframes. You can still <a href="homepageslider/" title="View our Slideshow">view the slideshow here</a>.</p>
</iframe>
<span class="blog"><a href="/blog" title="Emily West's Fashion Blog"><img src="assets/images/homepage_blog.png" alt="Fashion Blog"></a></span>
<a href="play/horoscopes.php" title="Emily West's Fashion Horoscopes"><img src="assets/images/homepage_horoscope.png" alt="Fashion Horoscopes"></a>
</div>


<a href="/bff" title="Click here to enter the BFF Contest"><img src="assets/images/homepage_contest.png" alt="BFF Contest" id="right"></a>

I generally avoid iFrames but after spending hours and hours trying to find a jQuery slideshow that met my requirements, finding one, then not being able to get it to work when incorporating it into my site, I just flat out gave up and decided to include it in an iFrame (total hack, i know, but my brain is going to burst!).

Here is the test site as well so you can get a visual: http://emilywest.com.serv7.temphostspace.com/

[Christian J]

Seems that the container element is not wide enough. The IFRAME is 725px wide and BFF image is 408px, but #wrapper is only 1060px.

Side-note: there are also some validation errors, like div#boxes in the HEAD section (where it's not allowed), and XHTML syntax despite using an HTML4 Doctype.

http://www.htmlhelp.com/cgi-bin/validate.c...phostspace.com/

[lintacious]

Seems that the container element is not wide enough. The IFRAME is 725px wide and BFF image is 408px, but #wrapper is only 1060px.

Nope, I had gone through that in my troubleshooting yesterday. Now I have the image down to 330px wide and it still does not float.

[lintacious]

I got it! Seems I had to put a <br /> after the iFrame because the images below were not actually wrapping. I also reduced the iFrame width to 635. Thank you for catching that!

Here is the working code for reference:

CODE

<div id="left">
       <iframe src ="homepageslider/" width="635" height="400" frameborder=0 scrolling=no>
            <p>Your browser does not support iframes. You can still <a href="homepageslider/" title="View our Slideshow">view the slideshow here</a>.</p>
        </iframe><br />
            <span class="blog"><a href="/blog" title="Emily West's Fashion Blog"><img src="assets/images/homepage_blog.png" alt="Fashion Blog"></a></span>
            <a href="play/horoscopes.php" title="Emily West's Fashion Horoscopes"><img src="assets/images/homepage_horoscope.png" alt="Fashion Horoscopes"></a>
    </div>