Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Designing With Code: Creating a Resizable Interface

Last updated Oct 17, 2003.

By Kris Hadlock

Web applications are not only giving the Internet a face-lift, they’re paving the way for new forms of usability-based design. Although designers rely on Web applications to provide a tool or service to people, it’s really the way that you present information that counts. Most people are apt to pass over or become confused by applications that aren’t visually intuitive or appealing.

You can do several things to make an application more visually intuitive, but the one we’ll talk about here is the resizable interface. A resizable interface isn’t necessary for every application, but in the right situation it can help present all of the available information to the user, regardless of the browser dimensions.

In this article, I’ll explain how to use CSS to create resizable interfaces with very little code. I’ll also take a look at some limitations of this approach and how to surpass them using JavaScript. A live example can be seen here and the source code that is used in the article can be downloaded here.

Resizing With CSS

In this section, I’ll explain how to use an external CSS file to create a resizable interface for a custom XHTML page. Let's get started by taking a look at the XHTML that we’ll be styling with CSS. The XHTML page in the source code that we’re using for this example is called css.html. This file contains the link to the external CSS file. It also contains the code that defines the div elements used in our interface. We’ll link to the external CSS file using this code:

<link href="css/css_layout.css" rel="stylesheet" type="text/css" />

This line of code provides us with a link to the CSS file that will define all of the styles for the page and ultimately make it resizable. The next bit of code shows the div elements that are used to contain data in the file.

<body>
	<div id="header">Header</div>
	<div id="content">
		<div id="left">Content Left</div>

		<div id="right">Content Right</div>
	</div>
	<div id="footer">Footer</div>
</body>

As you can see, there’s nothing fancy going on here; this is just a simple file to get us started. We are simply defining elements for the body of the document. These elements are all basic pieces of a typical Web application, such as a header, a content area with two columns for displaying data, and a footer. In order to display this data in a stylized way, we’ll create the CSS file that we’re referencing in the link code above, name this file "css_layout.css", and add it to a directory named "css" in the root of our directory structure.

Once we’ve created the file, we can add specific CSS properties to our elements to make them resizable. The first class that we’ll create is a default class for the html and body elements. Below is the code:

html, body
{
	margin: 0px;
	width: 100%;
	height: 100%;
}

This code sets all of the outer page margins to zero, giving us a flush page. Next, we’ll set width and height. Here’s a little-known fact: If these elements don’t have a height of 100 percent, the child elements will simply inherit the height allocated to them by their content. This would make it impossible to use percentages to create a page that has a resizable height.

Now that we have our most important elements set up, we can move on to develop custom classes for the div elements, which define the page parts. We’ll focus first on the header element and use this code:

#header
{
	height: 20%;
	background-color: #333;
	color: #fff;
}

You can see that we’re setting the height to a percentage because we want the page layout to be resizable, or "liquid" as some call it. This percentage can be anything that you like, I simply set it to a size that is most typical. In order to distinguish this part of the GUI, I’ve also added a background color and a color for the text.

Next, I’ll focus on the GUI’s content area, which contains the content and left and right div elements. Here are the CSS classes for these elements:

#content
{
	height: 70%;
}

#content div#left
{
	width: 20%;
	height: 100%;
	float: left;
	background-color: #eaeaea;
}

#content div#right
{
	width: 79%;
	height: 100%;
	float: right;
}

The content element contains the left and right elements, which create two columns for the content. In Web applications, most data is stored in the content area, so I set the height to 70 percent. You can change this to any percentage left on the page, but keep in mind that you need to leave room for the footer.

The left and right elements have widths that—when combined—fill up the width of the browser. In this case, the left is used as a sidebar and has a width of 20 percent and the right is used for the rest of the content and has a width of 80 percent. The height for both is 100 percent and they float left so that they sit next to each other, creating a two-column layout.

Lastly, I added another background color to set the left content apart from the right content area.

All that we have left now is our footer, which is as simple to create as the header. All that we’re doing here is taking the leftover available height of the page and using it as the height of the element, which happens to be 10 percent. I’ve also added background color to set the footer apart from the content. Here is the code for the footer class:

#footer
{
	height: 10%;
	background-color: #ccc;
}

We now have the framework to create a resizable interface for our Web application. But what if we wanted to set the header and footer height to a specific size, while leaving the content area height as the only resizable area of the page? Well, this poses quite a few issues with CSS, but it can be done rather easily with the help of a little JavaScript. Actually, if we add JavaScript into the mix, it will eliminate quite a bit of code from our CSS file; the amount of code will be about the same, simply distributed into an additional file. Let's take a look at how to accomplish this.

Resizable Page Elements with JavaScript

If we use JavaScript for this project, we’ll need to create new XHTML and CSS files. We need the XHMTL file in order to link to the new CSS file and import a JavaScript file. The code for these two statements is as follows:

<link href="css/js_layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascript/Page.js"></script>

With this code, we’re creating a new CSS file that specifically caters to the JavaScript example. We’re also adding a JavaScript file called Page, which we’ll need to add to a directory in the root of the project. We’ll call this directory "javascript." The div elements for this file are no different from the CSS version. Let's take a look at our new CSS file, starting with the class for the html and body elements.

html, body
{
	margin: 0px;
	height: 100%;
}

Again, we’re setting the margin to 0 for the outer bounds of the page and we’re adding a height of 100 percent so that the child elements are free to resize in height. The next class is for the header, which looks slightly different from the CSS example because the height is a pixel amount of 100.

#header
{
	height: 100px;
	background-color: #333;
	color: #fff;
}

The next two classes are for the columns that will display in the content area. We don’t need a content class in this example because—unlike the previous example—none of these elements need a height property. This is because the height will be set dynamically in the JavaScript file based on the height of the browser body minus the header and the footer height.

#content div#left
{
	width: 150px;
	float: left;
	background-color: #eaeaea;
}

#content div#right
{
	float: left;
}

Last, we still need to add our class for the footer element. Again, this class will only be different because of the height factor. The height for this element is going to be set to 50 pixels, meaning that we now have the elements and dimensions that we need in order to create our JavaScript object. Once our JavaScript file is created in the "javascript" directory, we’ll open it and add the following code to instantiate a Page object:

Page = {};

Next, we’ll create the resize method that will be triggered by onload and onresize events, which we’ll add to the end of this object. Here is the code for this method:

Page.resize = function()
{
	var header = document.getElementById(’header’);
	var footer = document.getElementById(’footer’);
	var content = document.getElementById(’content’);
	var left = document.getElementById(’left’);
	var right = document.getElementById(’right’);
	
	var contentHeight = document.body.offsetHeight - (header.offsetHeight + footer.offsetHeight) +"px";
	content.style.height = contentHeight;
	left.style.height = contentHeight;
	right.style.height = contentHeight;
}

This method first sets variables equal to the elements in the current document. With these elements, we can access any and all of their properties, which makes the resizing part a cinch.

In order to determine the height of the content area, we must first determine the height of the document body. We do this by accessing the offsetHeight. Once we have the body height, we need to gather the height of the header and footer elements in order to subtract them from the total height of the document body. Again, we’ll gather the height using the offsetHeight property, but now on the actual element variables.

Once we have all of the numbers, we can do the math to create a variable called contentHeight. We’ll add a string of "px" to the end to set it as pixels for CSS. This variable is then used on all three content elements, including the content element itself and the left and right div elements. We use it by setting the style height of each element to the new contentHeight number. That’s it; we now have resizable content with set header and footer heights.

We’re not done though! We must now add the code that will be used to resize the interface when the page is loaded or resized. When the page is loaded or resized, an event will trigger our Page object’s resize method. By using both the onload and onresize events in the Page object, our file will always be the correct size, regardless of the browser window’s size. Here is the code that will fire these events:

onload = onresize = Page.resize;

With this code, the Page object becomes completely self-contained and can be relocated to any application, assuming that it targets the correct element names for your interface. This object will allow us to implement an application interface that’s compatible with any screen resolution. The usability factor for a Web application can double based on the fact that this object allows users to see all of the tools at all times, regardless of browser size.