Futurebox?

I’ve aptly called it Futurebox because this is only a proof of concept, it only works in the better browsers but never the less is a cool look at a useful CSS3 technique. The following browsers have been tested and will work with this example, it may also work in earlier versions of the browsers listed but I have not yet tested in them.

• Firefox 1.5+
• Safari 3.2+
• Chrome 2+
• Opera 9.5+

How does it work?

As mentioned above the whole thing is only possible due to the CSS3 :target pseudo class. It all works by getting the anchor link in a URI which can be referenced in your CSS using :target. If an element has an id that matches the URI the styles applied to it will come into effect. I’ll break down the above example so we can get a better look.

The xhtml

<a href="#futurebox_img1">
	<img 
		src="gr_ninja-attack_med.gif" 
		width="100" 
		height="102" 
		alt="The CSS Ninja" 
		id="futurebox01" 
	/>
</a>
 
<div class="overlay" id="futurebox_img1">
	<a href="#close" title="Close future box">
		<img 
			src="gr_cssninja_lrg.png" 
			alt="The Css Ninja" 
			width="600" 
			height="639" 
		/>
	</a>
</div>

Pretty simple mark-up we have our thumbnail image which links to an anchor link. The overlay image has the id that we are linking to on the thumbnail. The overlay mark-up has 2 divs around the image to horizontally and vertically centre the image. We have another anchor tag around the large image this is so we can “close” the overlay.

The CSS

html, body { height: 100%; }
 
.overlay
{
	width: 100%;
	height: 100%;
	position: absolute; 
	top: 0; 
	left: 0; 
	display: none; 
	z-index: 999;
	background: rgba(0,0,0,0.7);
}
	.overlay a
	{
		display: table-cell; 
		vertical-align: middle; 
		text-align: center;
	}
		.overlay_container img
		{
			background: #ffffff;
			padding: 10px;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
		}
 
.overlay:target { display: table; }

The overlay class is position: absolute so it can sit over the content, it is expanded to 100% width and height and has a background: rgba() applied so we get that nice transparent overlay look. Not all browsers support rgba that work with this example, for those no background colour will appear. Initially it is set to display: none.

overlay_container class The anchor tag has display: table-cell so it will act like a table cell, vertical-align: middle is applied give us the ability to vertically centre anything within this container and finally text-align: center so we can horizontally centre any inline elements. The entire screen is now clickable by styling the anchor this way making it more inline with how lightbox works.

The image has padding, background and for the supporting browsers we set rounded corners using border-radius. Since images are naturally inline elements, we can avoid setting margin: 0 auto and a width on the image to centre it (text-align: center on the previous container handles that for us) making this technique more flexible.

Finally the magic that allows this technique to work is very simple we target the overlay we want to display by using :target, the user clicks a thumbnail which has a link to #futurebox_img1 the :target pseudo class will look for any elements with the id of futurebox_img1 and set it to display: table, for a more in depth look at the css table property check out my previous article. We use table rather than block so the styles setup on the overlay_container class will allow us to horizontally & vertically centre the image.

Further reading

Think Vitamin has a good write up on the :target pseudo class – Stay on :target.

Arve Bersvendsen, an Opera developer, has a good proof of concept on his personal site to change the stacking order of draggable windows using :target.

CSS3.info has a good compatibility table showing browser support for CSS3 selectors.

Documentation on the application cache feature supported in safari iPhone 2.1+ is scarce and of that documentation it doesn’t go into great detail. The best place to learn about this is on the Safari DevCenter under the mobile section, there it has 2 documents introducing the user to offline webapps; the first is a quick rundown on just the manifest file and the second article touches on a few more features available to offline webapps such as the javascript events for updating the cache when the user is online. We’ll delve into these later in the article but first let’s take a look at a working example.

To see the offline webapp in action, load the demo on your iPhone, then turn Airplane Mode on, re-open Safari and reload the demo. This time it will fetch the files from the cache that was created on the initial load.

How does it all work?

To get a basic offline webapp up and running is incredibly simple but it does have one caveat which tends to get a lot of people frustrated quickly when for some reason the offline feature isn’t working. We’ll explain that issue shortly.

The first thing we need to do is create what is called a cache manifest file which has references to all the resources we want to save. Whether it be JavaScript, CSS, images or html, below we can view the manifest file used in the demo.

CACHE MANIFEST

# Offline cache v1
# html files
article.html

# css files
assets/_styles.css

# js files
assets/_javascript.js

# images
assets/ico_ninja-star.gif

The manifest file is a simple plain text file that holds the file names you wish to cache, the paths are relevant to where you saved the manifest file which is recommended to be in the root of the site. This file will be saved as filename.appcache, where filename is anything you wish. Lines that start with a # are comments and are ignored by the cache.

Referencing the cache file

We now have our cache manifest file setup and named, the next thing we need to do is reference that file in the html so this offline access will function for the specified files in the manifest.

<html manifest="thecssninja.appcache">

The manifest file is referenced in the html tag through the manifest attribute and just points to the filename.

Now the one issue that catches a lot of people when trying this out is not setting up the mime type correctly in their chosen web server. Whether it be IIS, Apache or something else, you’ll need to make sure that the .appcache file is fed through as text/cache-manifest.

For Apache you can add the text/cache-manifest to the mime.types file found in the conf folder in apache and add the following to the bottom of the file.

# html 5 application cache - offline access
text/cache-manifest    appcache

For IIS open up the IIS manager found in Control Panel > Administrative Tools > Internet Information Services double click the Mime Types icon in the manager and scroll down the list until you find the .appcache file and edit the mime type to have text/cache-manifest.

That’s it, to get a basic offline webapp to work is incredibly simple all it takes is the manifest file to specify which files to cache, declare it in on the <html> tag using the manifest attribute and you have yourself a site still accessible even if the user has no network connection.

UPDATE: GeoNomad in the comments suggested a great tool to make sure your manifest file is being fed through with the correct mime type, Web Sniffer. I put my manifest file through the Web Sniffer tool, you can see that the Content-Type is set as text/cache-manifest.

Updating the cache

If you want to update the cache you either need to change/add file references to the manifest and then tell the cache to update. Updating a file that the manifest calls will not make the cache reflect the changes. The mozilla developer article on applicationCache makes a good suggestion to version your manifest file as the JavaScript events described below will only fire if there is a change to the manifest file. To update the cache we have:

window.applicationCache;

This object has various stages depending on what the cache is doing which can be checked by using the .status method. There are 6 different stages:

• Status 0 (UNCACHED) is returned which means that there is no cache available
• Status 1 (IDLE) is returned means the cache you have is currently the most up-to-date
• Status 2 (CHECKING) is returned means there is a change in your manifest file and it is checking it for changes
• Status 3 (DOWNLOADING) is retuned means changes have been found and they are being added to your cache
• Status 4 (UPDATEREADY) is retuned means your new cache is ready to be updated and override your current cache
• Status 5 (OBSOLETE) is returned means your cache is no longer valid meaning it has been removed

These available statuses can be attached to the applicationCache object with event listeners so we can tell the web app what to do on what status. In our case we want to update the cache to reflect changes we have done.

var webappCache = window.applicationCache;

function updateCache() {
    webappCache.swapCache();
}

webappCache.addEventListener("updateready", updateCache, false);

In the above example we attach an event listener to the applicationCache looking for the updateready status which means there is a change to the manifest file and our cache is ready to be updated we do so by using the swapCache() method.

There is 2 more event handlers which do not appear in the window.applicationCache.status these are part of the event summary. Those are error & progress. We’ll take a look at how to use the error event, the progress event is basically the same as the downloading event handler.

var webappCache = window.applicationCache;

function errorCache() {
    alert("Cache failed to update");
}

webappCache.addEventListener("error", errorCache, false);

All the error event handler does is return the specified function we attached in the event listener when the cache is not available or does not exist.

Event summary

In the applicationCache we have various events available so when the cache is being updated, or as mentioned above when something goes wrong. We can attach to those events and keep the user informed on what is happening. These events will execute in specific order based on what is happening with the cache and therefore give us useful hooks to represent that back to the user.

Pete who commented below and needed a way of indicating to the user that the cache was downloading prompted me to look further into the events that get fired and which ones would be useful in this scenario. I created a demo which will indicate to the user that the cache is downloading by showing a loading icon and once the cache had finished downloading, the loader would be hidden.

The event order for this example was as follows:

• checking – The page loads and the cache is checked for any changes.
• progress – The download event actually gets fired before this but we don’t need to hook into that. The progress event will fire for each file that is referenced in your manifest until the cache has finished downloading.
• cached – The cache has successfully downloaded and the cached event is fired so we utilise that to hide the loader.
• updateready – This event is fired so we can then swap the old cache with the newly downloaded one.

In the above mentioned demo we also attached event listeners to the error and noupdate events so we can handle errors and if the cache is already up-to-date.

Is the user online

There is also a new method on the navigator object called onLine which returns a boolean value if there is a network connection or not.

navigator.onLine

In the article example the onLine method is used to update the title if the user is on/offline.

Only the beginning

The applicationCache is not yet finalised and is of course subject to change with newer and refined features. I’m sure there will be additions in the upcoming iPhone OS 3.0 release. If there are updates unfortunately these cannot be discussed until the NDA is lifted. But of course this won’t stop us speculating.

Some of the features available in applicationCache on firefox 3.1 and safari 4 will inevitably be added in future releases of the iPhone OS. Such as the NETWORK: and FALLBACK: sections in the manifest file, these allow for the developer to specify a file they wish to never cache or to have a file load if something fails with the first option.

Short sharp facts about the appcache: http://appcachefacts.info/

In the above example we can see all the examples of the hovers using nothing but the hover pseudo-element on the surrounding anchor tag. This example uses a few gracefully degrading elements so if the browser doesn’t support the property it will still render fine and function as expected.

Cross browser support

This example has been tested in and works in the following browsers

• IE6+
• Firefox 1.0+
• Opera 9.25+
• Safari 3+
• Chrome 1+

Roll over

We’ll deconstruct the above example and see how it all comes together.

The xhtml

<a class="feature01" href="#">
	<span class="overlay01">
		<span class="caption01">Roll over</span>
	</span>
	<img src="location/to/image" alt="The CSS Ninja" width="200" height="206" />
</a>

The above code is pretty basic a simple anchor tag with a class the image that displays and the overlay and caption we want to show when the user hovers over the image.

The CSS

a.feature01
{
	display: block;
	border: 1px solid #dfd0cb;
	border-width: 0 1px 1px 0;
	margin: 20px 20px 1em 20px;
	float: left;
	position: relative;
}
a.feature01:hover { border-color: #000; }
 
	a.feature01:hover .overlay01
	{
		position: absolute;
		z-index: 3;
		width: 194px;
		height: 200px;
		border: 3px solid #fff;
	}
		a.feature01 .overlay01 .caption01
		{
			position: absolute;
			height: 30px;
			line-height: 30px;
			width: 100%;
			z-index: 3;
			text-indent: -9999em;
			color: #000;
			font-size: 11px;
			bottom: 0;
			overflow: hidden;
		}
		a.feature01:hover .caption01
		{
			text-indent: 10px;
			background: rgb(255,255,255);
			/* for browsers that know rgba */
			background: rgba(255, 255, 255, 0.75);
		}
		a.feature01 img { display: block; }

The break down

Now the CSS is a bit more involved but is relatively straight forward with a bit of explanation.

a.feature01
{
	display: block;
	border: 1px solid #dfd0cb;
	border-width: 0 1px 1px 0;
	margin: 20px 20px 1em 20px;
	float: left;
	position: relative;
}

The anchor tag is converted to a block level element and has its position set to relative so we can move around the span tags inside.

a.feature01:hover { border-color: #000; }

The border-color change applied to the hover pseudo-element is there so IE6 will actually activate the hover this is due to a weird bug in IE6 that will not activate internal items that are changed when hovered over, unless something is applied directly to the hover pseudo-element, in our case a border. This can also be fixed by using background-color: transparent which is the least destructive property if you don’t actually want to modify the anchor itself on hover.

a.feature01:hover .overlay01
{
	position: absolute;
	z-index: 3;
	width: 194px;
	height: 200px;
	border: 3px solid #fff;
}

The .overlay01 span is styled on hover as we only need it when the user hovers over the image. Its converted to a block level element, positioned absolutely and given a width and height of 6px less than the image width/height. This is because of the 3px border that sits over the top of the image. If you decrease or increase the border you will need to adjust the width/height accordingly.

a.feature01 .overlay01 .caption01
{
	position: absolute;
	height: 30px;
	line-height: 30px;
	width: 100%;
	z-index: 3;
	text-indent: -9999em;
	color: #000;
	font-size: 11px;
	bottom: 0;
	overflow: hidden;
}
 
a.feature01:hover .caption01
{
	text-indent: 10px;
	background: rgb(255,255,255);
	background: rgba(255, 255, 255, 0.75); /* for browsers that know rgba */
}

The .caption01 span is also position absolutely to the bottom of the anchor tag so the caption will display in a useful position when it’s hovered over. line-height is set to the same value as the height so the text will sit vertically centered. We also set a negative text-indent to hide the text when the hover is inactive; on hover we set the text-indent to a positive number and set the background-color twice using rgb and rgba. This will give it a nice transparent effect, and a solid rgb color for non-supporting browsers, gracefully degrading the transparency.

a.feature01 img { display: block; }

Finally the image is given a display block so we don’t get a gap between the anchor tag and image.

A little fun

So you may have noticed that the 3 middle images in the example above have an extra word appear when you hover. If you took a look at the example page html you may have noticed that the caption text is using the after psuedo-element along with the content property to dynamically add content through CSS. This is another gracefully degrading technique that will fall back to the generic text if it’s not supporting.

a.feature04 .overlay01 .caption01:after { content: ' more!'; }

I’ll be looking at 5 really ingenious implementations that are being used today on various websites and web apps.

5. Typeface.js

A great solution to use custom fonts on your websites without having to cut out the text as images. This generates JavaScript from an otf file which renders out the font using the canvas tag. Rendering text with Javascript, <canvas>, and VML

4. Box2DJS physics engine

This library is for recreating elements on a canvas that obey the laws of physics such as gravity and motion. Objects can interact with each other in a realistic manner. Physics Engine for JavaScript

3. Wolfenstein 3D

A great port of the classic Wolfenstein 3D done using nothing but javascript and canvas. Javascript Wolfenstein 3D

2. Yahoo pipes

Yahoo pipes is a mash up tool for the less technical to build “pipes” or mashups of data pulled from various sources. Pipes uses the canvas tag to create connecting points between data sources and controls. The blue curvy line is done using canvas and its bezier abilities to curve lines.

Pipes is a powerful composition tool to aggregate, manipulate, and mashup content from around the web.

1. Mozilla labs Bespin

By far the best implementation of canvas so far is Mozillas Bespin a web code editor which uses canvas to create it’s slick interface, without canvas Bespin would not be as responsive as it is even with thousands of lines of code.

Bespin is a Mozilla Labs experiment on how to build an extensible Web code editor using HTML 5 technology.

• 3 column, 2 column, 1 column it’s all flexible
• Fluid centre layout
• No need for negative margins.
• Works in ie5+, firefox 1+, opera 9.6+, safari 2+, chrome
• Minimal mark-up & clean CSS

With inspiration coming from A List Aparts’ article ‘In Search of the Holy Grail‘ but with a need for a better way without the use of negative margins to help pull the main content back into place. Making it a much more powerful, flexible layout with a much easier setup. Let’s take a look at an example before we delve into the inner workings.

The xhtml

<div class="maincontainer">
	<div class="column01">
		<div class="restraint">
			<p>Left column</p>
		</div>
	</div>
	<div class="column03">
		<div class="restraint">
			<p>Right column</p>
		</div>
	</div>
	<div class="column02">
		<div class="restraint">
			<p>Middle column</p>
		</div>
	</div>
</div>

The CSS

.maincontainer
{
	position: relative;
	overflow: hidden;
}
	/* Left column */
	.maincontainer .column01
	{
		float: left;
	}
		/*
		    Width is set in inner div of column to
		    avoid the use of negative margins
		*/
		.maincontainer .column01 .restraint,
		.maincontainer .column03 .restraint
		{
			width: 200px;
		}
	/* Left column */
	.maincontainer .column03
	{
		float: right;
	}
	/* Middle column */
	.maincontainer .column02
	{
		overflow: hidden;
	}
		.maincontainer .column02 .restraint
		{
			width: 100%;
		}
		* html .maincontainer .column02
		{
			/* cause hasLayout so middle column will sit between left and right */
			display: inline-block;
		}

How it all works

This layout is quite ingenious, it’s very simple and extremely flexible. The containing div isn’t essential for the layout to function. However, it is a good idea. Containing it will allow for easy selection in the CSS and prevent issues with inheritance. You’ll notice that the left and right column appear before the main content container, this is needed for the layout to work. In each column there is a restraint div. The magic of this layout is in the restraint div setup; columns 1 & 3 are floated left and right respectively and column 2 is set with a hidden overflow. This allows for column 2 to appear between the left & right columns. The restraint divs can now be used to set the widths of the columns. Columns 1 & 3 have pixel widths set, column 2 is then set with 100% width so it will fill the remaining space. Having the widths set inside the columns allows for this layout to work. If you have ever floated an image near a paragraph you’ll understand how this is working, by placing the 2 floated divs before the block level element will cause it to wrap around the floated elements. This setup has 1 difference if the middle column is longer than the other columns it will not wrap but rather keep it’s width and not overflow into the left & right columns this is due to the hidden overflow on the middle column, without it the middle column would behave as expected and wrap underneath the left and right columns. The * html selector is used to give column 2 layout in IE6, this is the least destructive hasLayout property in our case. Without this, the middle column would appear below the left & right columns.

Here we have a very flexible layout, I highly suggest you mess around with it and see the true power e.g. removing the left, right or both columns won’t break the layout, and the middle column will expand to take up the extra space. Adjusting the left and right column widths will also make the middle column adjust to the space it has to work with. I believe this to be the most powerful layout available. Have a play with this example, there are 2 input fields which dynamically adjust the left & right column widths.

One thing to make it perfect

There’s one last thing to make this perfect, if you have been playing with the demos you may have noticed that resizing the window to a small width breaks the layout and eventually causes the middle column to behave oddly.

What we need is a cross browser min-width and if you take a look at my last article "A look at pure CSS IE6 min-width solutions" we have the perfect solution using padding to accomplish just that.

The xhtml

<!--[if IE 6]>
	<div class="min_width">
		<div class="min_width_inner">
			<div class="min_width_container">
<![endif]-->
	<div class="maincontainer">
		<div class="column01">
			<div class="restraint">
				<p>Left column</p>
			</div>
		</div>
		<div class="column03">
			<div class="restraint">
				<p>Right column</p>
			</div>
		</div>
		<div class="column02">
			<div class="restraint">
				<p>Middle column</p>
			</div>
		</div>
	</div>
<!--[if IE 6]>
			</div>
		</div>
	</div>
<![endif]-->

The CSS

/* Min -width styles */
.min_width
{
	padding: 0 480px;
	text-align: left;   
}
.min_width .min_width_inner
{
	width: 100%; /*  gives the element hasLayout */
}
	.min_width .min_width_container
	{
		margin: 0 -480px;
		position: relative;
		float: left;
	}
 
/* Sangraal layout styles */
.maincontainer {
	position: relative;
	overflow: hidden;
	min-width: 960px; /* For good browsers */
}	
	/* Left column */
	.maincontainer .column01
	{
		float: left;
	}
		/* Width is set in inner div of column to avoid the use of negative margins */
		.maincontainer .column01 .restraint,
		.maincontainer .column03 .restraint
		{
			width: 200px;
		}
	/* Left column */
	.maincontainer .column03
	{
		float: right;
	}
	/* Middle column */
	.maincontainer .column02
	{
		overflow: hidden;
	}
		.maincontainer .column02 .restraint
		{
			width: 100%;
		}
		* html .maincontainer .column02
		{
			/* cause hasLayout so middle column will sit between left and right */
			display: inline-block;
		}

If you refer back to the "A look at pure CSS IE6 min-width solutions" article you’ll see how the min-width works in IE6. There is only 1 slight difference with this, the actual min-width property is on the .maincontainer div and not the .min-width div. The min-width mark-up has also all been moved within the IE6 conditional comments so it will only render for IE6 and not cause any problems with the good browsers.

A layout to remember…

This layout isn’t perfect but it comes damn near close. It is a little heavy on the mark-up but for what it accomplishes I think that’s ok. The order of the div’s will also be a concern to some especially those using screen readers as going from the left to right to middle may disorientate some.

1. Using borders to create min-width effect

This technique was inspired by the very clever Stu Nicholls over at CSSplay. It uses a left and right border to create the min-width effect in IE6.

The xhtml

<div class="min_width">
	<!--[if IE 6]>
		<div class="ie_min-width">
	<![endif]-->
 
		<p>
			Content here
		</p>
 
	<!--[if IE 6]>
		</div>
	<![endif]-->
</div>

The CSS

.min_width
{
	min-width: 500px; /* For good browsers */
}
	/* for ie6 only adds borders to give min-width effect */
	* html .min_width
	{
		border: 250px solid #ff0000;
		border-width: 0 250px; /* Set this to half of you min-width (250 * 2 = 500)  */
	}
		.min_width .ie_min-width
		{
			margin: 0 -250px; /* Pulls the content back over the borders */
			position: relative;
			float: left;
		}

How it works

You set up 2 containers 1 which has the min-width property for all the standard compliant browsers. You then target that same div with the * html selector and apply a border with half the value of the min-width you wish to have and apply that to the left and right of the border attribute. The second container is within IE conditional comments so it doesn’t render in anything but IE6 this is then applied with a negative margin equivalent of the border values previously set. Position relative and float left are applied to fix the negative margin bug.

The Pros

• Minimal mark-up and CSS.
• Simple to implement.
• Great for simple layouts.

The Cons

• Border colours can’t be set to transparent in IE6 this can cause problems when setting background images/colours on the container with the border applied. See example here. There is a “fix” to create transparent borders in IE6 but it relies on the Chroma Filter property this allows background colours to come through the border but does not fix the issue of backgrounds on the div with the border, see the chroma filter in action here.
• Not for every layout. The more complex and graphic intensive a design becomes, the less viable this solution is.

Chroma filter fix

/* Gets transparent borders working in ie6 */
filter:progid:DXImageTransform.Microsoft.Chroma(color=#ff0000);

2. Using padding to create min-width effect

This technique works in a similar way to the borders but without the issues and hassles of using borders. I have not yet seen this technique used anywhere else.

The xhtml

<div class="min_width02">
	<!--[if IE 6]>
		<div class="min_width_inner">
			<div class="min_width_container">
	<![endif]-->
			<p>
				Content here
			</p>
	<!--[if IE 6]>
			</div>
		</div>
	<![endif]-->
</div>

The CSS

.min_width02
{
	min-width: 500px; /* For good browsers */
	height: 200px;
}
	* html .min_width02
	{
		padding: 0 250px;
	}
	.min_width02 .min_width_inner
	{
		width: 100%; /*  gives the element hasLayout */
	}
		.min_width02 .min_width_container
		{
			margin: 0 -250px;
			position: relative;
			float: left;
		}

How it works

This uses 3 containers, the main parent container has the min-width property set for the good browsers and also uses the * html selector to apply the padding to the left and right so the padding will equal that of the min-width you wish to use. The 2nd and 3rd containers are in conditional comments as they are only needed for IE6. The 2nd container has width: 100% applied to give IE6 layout. This is set to width because it is the least destructive property to cause layout in IE6, you could use zoom: 1 but this is a propriety CSS property and is better to avoid. Refer here for all properties that cause layout. Finally the last container uses negative margins to pull it back into the padding, again the position and float are there to fix the negative margin bug.

The Pros

• Uses padding rather borders
• No issues with having background colours/images

The Cons

• It’s a little heavier on the mark-up but this is only rendered in IE6, through the use of conditional comments.

There we have 2 ingenious techniques to accomplish what is a very easy task in all the good browsers. With a few workarounds these are hack free, clean and simple to implement.

The run down

In this example I will do a simple header, content, footer layout but with one twist this layout stretches both vertically and horizontally creating a true fluid layout without the use of hacks or CSS voodooism.

The xhtml

<div id="maincontainer">
	<div id="header">
		<p>Header</p>
	</div>
	<div id="content">
		<div class="container">
			<p>Content</p>
		</div>
	</div>
	<div id="footer">
		<p>Footer</p>
	</div>
</div>

The CSS

/* Makes the layout expand to 100% height. Without this CSS below won't work */
html,body { height: 100%; }
 
#maincontainer
{
	display: table;
	height: 100%;
	width: 100%;
}
	/*  Basic table layout */
	#maincontainer #header,
	#maincontainer #content,
	#maincontainer #footer
	{
		display: table-row;
	}
	#maincontainer #header
	{
		height: 150px;
		background-color: green;
	}
	#maincontainer #content
	{
		height: 100%;
		background-color: #000000;
		color: #ffffff;
	}
		#maincontainer #content .container
		{
			display: table-cell;
			padding: 10px;
		}
	#maincontainer #footer
	{
		height: 80px;
		background-color: purple;
	}

The run down

Now we’ll take a look at a technique that isn’t easily accomplished in the good browsers, I’m of cause speaking of vertical centring. With the use of table display property we can accomplish this with very little mark-up and CSS.

The xhtml

<div id="maincontainer">
	<div class="table-cel">
		<div class="box01">
			<p>Horizontally and vertically centred!</p>
		</div>
	</div>
</div>

The CSS

/* Makes the layout expand to 100% height without this CSS below won't work */
html,body { height: 100%; }
 
#maincontainer
{
	display: table;
	height: 100%;
	width: 100%;
}
	/* Vertical centre */
	.table-cel
	{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		background-color: #000000;
	}
		.table-cel .box01
		{
			margin: 0 auto;
			text-align: left;
			width: 500px;
			height: 500px;
			background-color: orange;
		}
			.table-cel .box01 p
			{
				text-align: center;
				line-height: 500px;
			}

These 2 examples only scratch the surface of the power that the table display property gives you. With Microsoft finally adding support in IE8 these techniques will only become more viable.