There are three main reasons why you would want to have a flexible HTML layout. First; if you need your layout to adjust dynamically to the size of your browser window. Second; if you need to have a “box” which adjusts to fit around dynamic content. Third; to prevent user specific font settings from breaking your carefully planned layout. This short beginners tutorial will show you an easy way to do this.
The “box” If you’re not going to use any graphical elements other than the straight HTML tags themselves you’re probably not going to need all this stuff. But if you’re going to use images to build borders around content in some way you’ll want to read on if you haven’t done anything like this before.
We’ll use one basic piece of HTML code to illustrate this, and it may be tweaked to fit multiple purposes:
<table width=”200″ cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<td width=”1″ style=”font-size: 1px;”>
<img src=”images/top-left-corner.gif” height=”30″ width=”30″ border=”0″ alt=”” />
</td>
<td width=”” style=”font-size: 1px;” background=”images/top-middle-side.gif”>
<img src=”images/1×1.gif” height=”30″ width=”1″ border=”0″ alt=”” />
</td>
<td width=”1″ style=”font-size: 1px;”>
<img src=”images/top-right-corner.gif” height=”30″ width=”30″ border=”0″ alt=”” />
</td>
</tr>
<tr>
<td background=”images/left-middle-side.gif”>
<img src=”images/1×1.gif” height=”1″ width=”30″ border=”0″ alt=”” />
</td>
<td valign=”top”>
The quick brown fox jumps over lazy dogs!
The quick brown fox jumps over lazy dogs!
The quick brown fox jumps over lazy dogs!
The quick brown fox jumps over lazy dogs!
</td>
<td background=”images/right-middle-side.gif”>
<img src=”images/1×1.gif” height=”1″ width=”30″ border=”0″ alt=”” />
</td>
</tr>
<tr>
<td style=”font-size: 1px;”>
<img src=”images/bottom-left-corner.gif” height=”30″ width=”30″ border=”0″ alt=”” />
</td>
<td style=”font-size: 1px;”
background=”images/bottom-middle-side.gif”>
<img src=”images/1×1.gif” height=”30″ width=”1″ border=”0″ alt=”” />
</td>
<td style=”font-size: 1px;”>
<img src=”images/bottom-right-corner.gif” height=”30″ width=”30″ border=”0″ alt=”” />
</td>
</tr>
</table>
The border around the center text consists of eight images; four corners, and four sides:
The corners are put in by using regular image tags, but the sides are repeating background images. Transparent GIFs fills the otherwise empty side cells; this is to prevent the cells from collapsing in some browsers.
The main problem is how to get all the pieces of the border to stick together without getting any unwanted gaps between the cells. It’s usually pretty easy to do this in any one particular browser, but if we want reasonable cross browser compatibility (and we want that, don’t we?) we may need to apply some tricks.
One important point to remember is if an element (like an image) doesn’t fit into the space you’ve set aside for it (like a table cell of absolute proportions), it’ll just squeeze in and make room for itself anyway.
Width
The total width of the “box” has to be set, and this is done in the width attribute of the table tag. In the example above this is set to an exact pixel width; if we want it to stretch over the whole width of the browser window we set it to 100%. If the width is set to just 1% it’ll wrap as close as it gets around the content of the center cell.
The width of each cell is set in pixels, and it’s only necessary to declared this in the top row. The left and right cells are set to only 1 pixel each, and this makes them wrap tight around the images inside. If the width of the cells were set to the same pixel width as the images you could risk getting gaps in some browsers under certain circumstances. The width of the center cells are set to “” (nothing), which makes them as wide as the rest of the horizontal width available, i.e. stretch as far as they have space.
Height
The total height of the “box” in the example depends on the width and the amount of content in the center cell. The height could also be set in % in the table tag to make it stretch to fit the browser window vertically, but we won’t do that in this example (but do try it yourself).
The height of the cells in the top and bottom rows are controlled by the style attribute. The reason for doing this is that some new browsers (especially Netscape 6.0) might leave vertical gaps if the cells are not forced to wrap around the content like this. This trick sets the font-size to 1 pixel, and this makes the cells tighten up even if they don’t contain any fonts. (Usually I would set this style attribute by an external CSS style sheet, but in this example the style is defined inline to keep it simple.)
Download
The example in this tutorial has been tested (and should work properly) in Internet Explorer 5.5, Opera 5.0, and Netscape 4.76 and 6.0 on Windows, and in Konqueror 2.2, Netscape 4.76, Mozilla M18 on Linux. Feel free to tweak the code, but remember to test it yourself on all browsers where you want to be sure it works.
Download the Code… http://www.DesignNewz.com/stretchcode.zip
Zez is a community website for developers, graphics and content designers. We aim to satisfy the intermediate to expert developers. For more information please visit http://www.zez.org
