Frames with CSS!

I made it!

After some hours I have now managed to put an idea into reality.

It was not easy but now I am happy that I made it.

If you scroll it will look like as if you have frames but in fact it is just CSS. It was not easy to make as Internet Explorer showed it differently than FireFox.

This is how I did it:

Doc type:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

CSS:

body {
padding-left: 10px;
width: auto;
}

#menuleft {
POSITION: fixed;
BACKGROUND-COLOR: transparent;
TEXT-ALIGN: center;
float: left;
}

#menuleft {margin-left:-80px;} html>body #menuleft {margin-left:0px;margin-top:50px;}

#menutop {
POSITION: fixed;
TEXT-ALIGN: center;
BACKGROUND-COLOR: #ffffff;
float: top;

}

#menutop {margin-left:110px;margin-top:-30px;} html>body #menutop {margin-left:140px;margin-top:-10px;}

/* fix for floating menu in IE */
@media Screen
{
#menuleft {
POSITION: fixed
}
#menutop {
POSITION: fixed
}
HTML {
OVERFLOW-Y: hidden
}
HTML BODY {
margin: 0px 0px 0px 0px;
OVERFLOW-Y: auto;
PADDING: 0px 0px 0px 0px;
HEIGHT: 100%;

}
HTML #menuleft {
POSITION: absolute
}
HTML #menutop {
POSITION: absolute
}

In HTML File:

<div id=”menuleft”>

<div id=”menutop”>

</div>

I got help from this thread and some other sources.

This html>body means that Internet Explorer reads the left side and FireFox the right side. That was a CSS Hack I found by googling.

So there you have it and good luck!

EDIT: April 10, 2006:

Here is another nice example and write-up how to do CSS frames:
http://www.webpelican.com/blog/examples/css-frames-example.htm

About the Author

Jim Westergren is a company owner from Sweden who lives together with his wife and son. Some of his interests are SEO, web development, writing and taking photos. Read his full about page or contact him. Follow Jim on Twitter or subscribe to this blog.
In Swedish: presentation, blog.

10 responses »Leave a comment

Colleen
said on December 13, 2005 at 7:25 pm

I think you did a great job on that and thanks for sharing! I may use this for something.
tk
said on December 20, 2005 at 11:15 am

Doesn’t work in Opera 8.51
Emil Stenström
said on February 5, 2006 at 12:51 am

I’ve written an article about frames and iframes in CSS that works in IE, Fx and Opera. Might help you.
Thunder
said on March 8, 2006 at 8:42 pm

I was wondering if you can us images for the actual frames and how would i do this.
Martin
said on August 31, 2006 at 6:51 pm

Hi, Emil, nice to see you’re linking to my CSS Frames Tutorial. The location, however, has changed. The new URL is
http://www.webpelican.com/web-tutorials/css-frames-tutorial/
me!
said on May 9, 2008 at 7:03 am

any idea how to have a clicked link in the menu re-load this frame?
Emil Stenström
said on January 15, 2009 at 1:55 am

@Martin: Sorry, I’m not linking to your tutorial, I linked to mine. Trying to steal some visitors are we?
Nate dogg
said on November 11, 2009 at 12:42 pm

Not helpfull at all noob
Emelie
said on July 6, 2010 at 11:15 am

Thank you for sharing, I’m still new to these and I really need references.
Emelie
said on July 6, 2010 at 11:16 am

thank you for sharing, I really need this