100% CSS Layout

2008-05-28T12:00:00+10:00

I had been looking for a CSS layout that has three components - a header, footer and content area - and the following characteristics:

When the content in the content area does not fill the available window space the footer should be set to the bottom of the page.
When the content overflows the footer should be positioned at the end of the document, off the screen.
The content area should fill at least all remaining window space so that any object I put inside it can scale to 100% of its height.
The content area should have a minimum height so that it won't look silly in a very tiny window (unlikely)
If the user resizes the browser the content area should resize.

I couldn't find a pure CSS solution so I came up with a solution that uses CSS and JavaScript.

View Sample (new window)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <script type="text/javascript"> function maxContent(){ var divContent = getElementDimensions(document.getElementById("content")); var divHeader = getElementDimensions(document.getElementById("header")); var divFooter = getElementDimensions(document.getElementById("footer")); var remainder = document.documentElement.clientHeight - divContent.y - divFooter.height - 0 if(remainder<250){remainder=250}; //minimum height of content document.getElementById("content").style.height = remainder + "px"; function getElementDimensions(q){ var offsetY=offsetX=0; var height=q.scrollHeight; var width=q.scrollWidth; while(q){ offsetX+=q.offsetLeft; offsetY+=q.offsetTop; q=q.offsetParent; } return{ "x":offsetX,"y":offsetY,"height":height,"width":width }; } } window.onload = maxContent; window.onresize = maxContent; </script> <style type="text/css"> html,body { margin:0; padding:0; } div#container { } div#header { background-color:#fbb; } div#content { background-color:#bfb; } div#footer { background-color:#bbf; width:100%; bottom:0; } </style> </head> <body> <div id="container"> <div id="header"> Header </div> <div id="content"> <table border="1" height="100%"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>b1</td> <td>b2</td> <td>b3</td> </tr> </table> </div> <div id="footer"> Footer </div> </div> </body> </html>

Setting a Maximum Page Width Using CSS

2008-02-16T12:00:00+10:00

When designing a web site one of the first decisions to make is whether to use a fixed-width, liquid or other type layout.

Fixed-width designs are popular but have certain limitations. If you design for 800x600 your layout may look much too small at a higher resolution. If you design for 1024x768, lower resolution screens will require a horizontal scrollbar.

Liquid designs, although not the perfect solution, have less compromises. At very low resolutions they can become very difficult to read and at very high resolutions line lengths can become very long and also difficult to read.

A good compromise in my opinion is to use a liquid layout but set a limit to the width.

One method of doing this reliably on popular browsers is to use the following styling:

<div style="max-width:1004px;width:expression(document.body.clientWidth>1004?'1004px':'auto'">

In this case, the maximum width is set to 1004 (for 1024x768 screen resolution less 20px for the vertical scroll bar).

John's Technology Blog

100% CSS Layout

Setting a Maximum Page Width Using CSS