How to Create a Frames Layout with CSS

Events
- JupiterEvents
- internet.com/webcasts
Jobs
Partners
Solutions
- eBooks
- Video
Shop

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.

‡ 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"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://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

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; 
  }

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.