Tutorials > Centering Iframe using table

I came across few sites that have iframes that are a little out of alignment when viewing it in either a higher or lower screen resolution then their(the one who coded) own screen resolution
So I made this detailed tutorial with an example available!
Please do not redistribute, edit, or post this tutorial elsewhere without my permission.

Requirements
- You'll need to have basic html knowledge
- Have a text editor (Notepad or any other similar program will do)
- Have your layout images ready and uploaded
- Have your image mapping done, if any (click here for tutorial)
- and have your CSS coded!

This will be my layout image with words/notes on it x3
- The width and height of the content display frame
- How far away the content display frame is away from the top and the left
- The width and height of your layout image
- Have your image mapping coords ready if you're using MSPaint

Yes I misspelled 'Your' and 'Mapping' lol =x

Okay, let's begin!
1. First, code your layout without doing any centering thing!
- save it as layoutframe.php(or .html, .htm etc) [Preview]
This will be my code, change the stuff highlighted in purple
and delete the text in blue! <!-- Change the link and the image maping coords -->
<html><head>
<link rel="stylesheet" href="/theme/style.css" type="text/css" media="screen" />
<title>Centering Iframe using a table</title></head>

<body>
<!-- Image Mapping -->
<map name="ImgMap">
Be sure to put the target to your content frame's name if you want it to open in the content frame Otherwise remove the target=""
<area shape="rect" coords="21,90,116,113" href="content.php" target="content" title="Me">
<area shape="rect" coords="21,125,116,148" href="you.php" target="content" title="You">
<area shape="rect" coords="21,160,116,183" href="layoutframe.php" title="Refresh">
</map>
<!-- Image Mapping End -->

<!-- Your layout Image -->
<img src="centeringIframe-lay.gif" border="0" usemap="#ImgMap">

<!-- The content frame -->
<iframe frameborder="0" border=0 width=223 height=168 src="content.php" name="content" style="position:absolute; top:93; left:150" scrolling=auto allowtransparency="true">
Set the scrolling to 'auto' if you set it to yes the scrollbar will appear even doh it isn't needed
</iframe>
</body></html>
<!-- Code ends -->

2. Open up a new file, this will be the index.php(or .html, .htm etc)
Remember to delete the text in blue! <!-- The Index page -->
<html><head>
<title>Centering Iframe using a table</title>
</head>

<body>
<style type="text/css">
body{background:#FFF}
body {background:url(centeringIframe-bg.gif)}
</style>

<!-- Layout frame in a table -->
<table align="center" valign="center" width="100%" height="100%">
<tr><td align="center">
Add 10px more to your iframe width and height
(eg. my layout image is 400x300px so I add 10px to both)
<iframe width="410" height="310" name="layoutframe" src="layoutframe.php" allowtransparency="true" scrolling="no" frameborder="0"></iframe>
Be sure to set this frame scrolling to 'no' since you don't want to have double scrollbar
</td></tr></table>
</body></html>

And you're done! Click here for the finish product
If you need help with the image mapping part click here

Rotation / Web ring