Margins Through Frames Tutorial

From Joe: Here’s a quick little tutorial that I thought could be useful to
certain sites. It’s by Ben Hartland from Construct My Site.com. Use it in good health.

Here is a cool thing: Margins, of a sort.

This method may or may not be the best for your site. Just learn what you can, and go from there.

     Let’s say you want to have your main page content a certain width. Of course, you could use frames or tables and simply specify the width in pixels.

     But what if you want it centered in the middle of the page with equal “Margins” on both sides, no matter at what size the user’s screen is set?

     Then your content will be in a window of a specific size in the middle of the screen.

     No, this does not use a JavaScript pop-up window. I’m not a big fan of those guys anyway.

     I know frames are a tough concept, but once you’ve got it, it is well worth the effort.

     1st: Click Here to see what all this is about. (That’s about with a Canadian accent!)

     And now… Here’s the SCRIPT!

Please contain your excitement. Really. I mean it. Hey you! … Yeah, you! Settle down! Good…

<FRAMESET cols=”50%,500,50%” border=”1″>

<FRAME src=”1_left.html” frameborder=”0″ noresize scrolling=”no” marginheight=”0″ marginwidth=”0″ name=”1_left”>

<FRAME src=”1_middle.html” frameborder=”0″ noresize scrolling=”yes” marginheight=”0″ marginwidth=”0″ name=”1_middle”>

<FRAME src=”1_right.html” frameborder=”0″ noresize scrolling=”no” marginheight=”0″ marginwidth=”0″ name=”1_right”>

</FRAMESET>

Now I know you are wondering how this marvel of technology works.

The trick is primarily in this one line:

<FRAMESET cols=”25%,500,25%” border=”1″>

that sets the columns for the page.

The 50% on the left and right are the margins.

The 500 is the middle, the main part of the page.

It is set to 500 pixels, while the other 2 are set to 50% each. That way, the middle stays a specific size, and the margin frames will fill up the gap on the right and left sides of the screen.

There is not much more than that. Just play around with the settings and have fun.

Mind you, frames are a lot like JS – one little thing out of whack, and the whole thing is messed up..

Tip: When you use this on a real page, set the 500 pixels to 640 so it will fill a screen set to 640×480. The size of the center frame will not change, even if the screen is set to 1024×768 or larger.

Here is a more advanced version with a bottom frame for a menu bar:

Click Here for the bigger and better version.

Good luck, use patience, and the Force, not drugs.

Back