How to position a page within an iframe using CSS
Here is a useful technique to position a page within an iframe using CSS. This allows to show part of a web page within the iframe and positioned to a specific spot on the page within the iframe. Here is an example that shows the “In the News” box on the Yahoo home page:
This is the CSS and html code to accomplish the task:
<style>
#outerdiv
{
width:446px;
height:246px;
overflow:hidden;
position:relative;
}
#inneriframe
{
position:absolute;
top:-412px;
left:-318px;
width:1280px;
height:1200px;
}
</style>
<div id='outerdiv '>
<iframe src="http://www.yahoo.com/" id='inneriframe' scrolling=no >< /iframe>
</div>
looks great in firefox and chrome. kind of messy in interet explorer though.
I am using the code provided above to position a page within an iframe using CSS but when i try testing it by making a simple html file with all that code above then it doesnt seems to work.
The code i put in the test html file is :-
TEST
#outerdiv
{
width:446px;
height:246px;
overflow:hidden;
position:relative;
}
#inneriframe
{
position:absolute;
top:-412px;
left:-318px;
width:1280px;
height:1200px;
}
But this doent seems to work please help me if I am missing something.
Thankyou
Thanks, this really helped me out!
Lol .. this trick work very well :d
who cares about IE
don’t forget html tags code works fine….
#outerdiv
{
width:446px;
height:246px;
overflow:hidden;
position:relative;
}
#inneriframe
{
position:absolute;
top:-412px;
left:-318px;
width:1280px;
height:1200px;
}
I wish I could say who cares about IE, with all the problems it puts out, but most visitors use IE. So if I want most visitors to see a working site I’ll have to work with IE somehow. Thank you, this is a great idea still!
I used the code above which works very well, however, I am only able to control the coordinates of the page that I am inserting into the iFrame…I want to change the coordinates of where the iFrame appears on my page, because as of now it stays in the top left no matter what I change.
Please help.