Search code examples
htmlcssiframehorizontal-scrolling

Horizontal scrolling from iframe to iframe

I apologize if the title doesn't accurately describe what I'm looking for. I'm still pretty new to this stuff, and I'm not sure exactly of the terminology of what I'm trying to accomplish, but here is a picture of it:

In this image, I have displayed another HTML file using an iframe ("Max to Meet the Maniacs"). As you can also see, there is another header element containing another iframe below. I want the second iframe to position to the right of the first so that I can scroll horizontally between the two. I hope this makes sense. I'm deploying a static website, so I know that has limitations (not entirely sure what they are though). Any ideas?

Edit: Here's my HTML. I can post CSS if needed.

<section id="first" class="main center profile">

<header style="height:100%;width:100%">
    <iframe style="height:100%;width:100%" src="profile.html" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0">
    </iframe>
</header>

<header style="height:100%;width:100%">
    <iframe style="height:100%;width:100%" src="danny.html" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0">
    </iframe>
</header>

</section>
Solution

  • Let me try to explain this, try making a outer container that is about 1000px wide. Now you want to make each iframe 500px wide so they can both fit. Then you want to float the top iframe left and the bottom iframe right. If it doesn't work try adjusting the width of the iframe because if you have padding or margin on it that will make it more than 500px and break the float.

    Help with floating. http://css-tricks.com/all-about-floats/

    Hope this helps.