Controling your Layout - Part 2
There are newer methods for controlling page layouts, however they are not widely supported by all browsers. Using a single-pixel GIF is still a reliable way to control white space across different browser versions and platforms.
You can use a single-pixel GIF inside a table cell to position images and stop the cell collapsing in some browsers.
In fact, you can use it to move or align an object anywhere on your page.
Using a GIF is the best format for this result. Unlike photographic images, solid blocks of color can be stretched easily with no loss of quality. You can make a single-pixel GIF with a program like Macromedia's Fireworks or Adobe's ImageReady.
Simply create a new document (File > New), set the canvas size to 1 pixel by 1 pixel. you can set the canvas to transparent, or choose a single color. The next step is to export the image (File > Export), and save it as a new GIF image.
Usually, designers tend to make the image transparent. Once transparent, it appears the same as the color background of your page. So no impression of the image can be seen, have image borders set to off: <img src="spacer.gif" border="0">
The advantage of using such a small image is that it takes no time to down load. You can also use the single image over again in several positions. Check out the button on our Images Guide to see the same image used in more than one position on the page.
Adjusting your GIF
You can control your page layout by changing the values of the <img> tag. The GIF has the same attributes as any other image. You can control its position by using the <align> attribute. For an explanation of this attribute, see our Images Guide.
As well as <height> and <width> , there are other values you can also use to modify your design. Horizontal space <hspace> is the amount of space held clear to the left and right of the image. Vertical space <vspace> is the amount of space held clear above and below the image.
This GIF image has both <hspace> and <vspace> set. As you can see, it pushes the text around it away to the space set by these tags. It works the same way with any other element on your page. The values of this GIF look like this:
<img src="spacer.gif" align="left" height="250" width="30" hspace="20" vspace="20">