How to Create a Frames Layout with CSS

Introduction

By far the most sought after use of CSS is to emulate the dated html 'frame' layout, whereby the header, navigation and footer stay on screen at all times and the content area will scroll. Since the adoption of the fixed position style by the latest browsers this is quite an easy task for CSS. Unfortunately, Internet Explorer hasn't introduced this style into it's repertoire (perhaps IE7 will correct this deficiency when it's released later this year).

Fortunately, there are ways around this and it's possible to make Internet Explorer versions IE5.01, 5.5 and 6 fall into line with the rest.

The following article will detail how to set up a 'frame' style layout with a fixed header, which can incorporate the navigation, a fixed footer and a scrolling content area, all of which will resize down to virtually nothing and still be usable (with scroll bars added as required). It has been tested on PC browsers Mozilla 1.7.5, Netscape 7.1, FireFox 1.0.3, Opera 8, Internet Explorer IE5.01, IE5.5 and IE6 and also Mac browsers Safari (1.3) and FireFox (1.0.3).

Method

Step 1

The (X)HTML setup

The layout I am aiming for will have a header the full width of the browser window that is 120px high and a footer the full width of the browser window by 50 px high. The header and footer will be fixed to the top and bottom of the browser window and the space in between will hold the scrolling content.

An example of the layout can be seen here.

Proposed layout

Since Internet Explorer doesn't recognize position fixed we need to make use of another 'bug' which will allow us to use an alternative method. This bug is the well known and documented faulty box model whereby the size of a box includes the padding and border (more on this later).

In order to make use of the faulty box model and still write valid code we need to use the following code at the start of our (X)HTML.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> A CSS Frame Layout </title>
<meta name="Author" content="Stu Nicholls" />
<style type="text/css">
</style>
</head>
<body>
</body>
</html>

Note the first line - <?xml version="1.0" encoding="UTF-8"?> - is valid (X)HTML and will not affect other browsers, but will have the effect of switching Internet Explorer into 'quirks' mode. If you want Standards Compliant Mode in Internet Explorer 6 the FIRST line has to be the !DOCTYPE declaration. Using the first line as above will give us valid code and the faulty box model.

Step 2

Styling the body tag

We do NOT need to style the <html> tag

body {
  margin:0;
  border:0;
  padding:0;
  height:100%; 
  max-height:100%; 
  background:#eee; 
  font-family:arial, verdana, sans-serif; 
  font-size:76%;
  overflow: hidden; 
  }

The body styling

margin:0; - removes the body margin.

border:0; - removes the body border.

padding:0; - removes the body padding.

The above styling just gives us the whole window to work with.

height:100%; - sets the height of the browser window to 100%

max-height:100%; - ensures that the body is not larger than 100% - This is for all browsers except Internet Explorer.

background:#eee; - sets the body background to light grey (choose any color you like).

font-family:arial, verdana, sans-serif; - select your fonts for the page. Note: You should always end the list with a generic font.

font-size:76%; - select a basic font size for the page. I find that 76% works well in all browsers.

overflow: hidden; - this has the effect of hiding the scroll bars in Internet Explorer.

Now we have a blank canvas with which to work. It will not scroll and doesn't have scroll bars.

Step 2

Here there's not much to see except a blank, gray window.

Created: March 27, 2003
Revised: April 26, 2005

URL: https://webreference.com/programming/css_frames/1

How to Create a Frames Layout with CSS