Josh Campbell: ...in the End

Tutorials

HTML: Basic Elastic Web Sites

Web sites that expand and contract to fit the size of the browser are great. It takes a bit more thinking to get right but at the basic level is actually quite simple. The easiest way to expand is in width as all the major browsers support this well. Vertically is a bit trickier and is supported to varying degrees.

So, the basic horizontally expanding table trick.

Step 1.
Create a table with 1 row and 3 columns. This is the main table that will do the expanding. In this example we will make the central cell the flexible one.


Step 2. Create the images that will go in the two end cells (I've used my logo for this example) and put them in.

Step 3.
Select the entire table and set the width to 100%. This will make the table expand to fit the window but you will notice that all 3 cells expand to make up the 100%. We only want the centre cell to expand leaving the other two fixed. To do this simply restrict the two end cells to the width of the images inside.

Step 4.
In IE you will now notice the two images are sitting on either side of the browser window. Throw a colour into the centre cell to see the effects of the expanding table.

Netscape may or may not work at this stage depending on which version you are using, the size of the browser window or which way the wind is blowing. To make this work for both browsers you need to set the width of the centre cell to 100%. Netscape will be happy enough with that now.

That's it. The basics of making an expanding table. This technique can be scaled up to build quite complex effects.