Jim Westergren
About me, my projects, SEO, Web Development and Personal Development since 2005
"If we did all the things we are capable of, we would literally astound ourselves." - Thomas A. Edison

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.

Site: www.SEOFAQ.net

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

10 Dec 2005

About the Author Jim Westergren Jim Westergren is a Swedish web entrepreneur currently living in Spain. He is happily married and has three lovely children. Some of his interests are web development, SEO and writing.
He is the Founder of DomainStats and N.nu. Read his .