Can anyone help me with an answer to this question: How do I put dynamic content from smarty into a template with fixed sized images (the top banner, side banner, and bottom banner image) without causing the template to fall apart when the amount of content from the db is too large or too small?

Originally when I was trying to make a page display layout with content I tried using a table.

<table>
<tr>
<td>top image</td>
</tr>
<tr>
<td>left side image</td><td>smarty dynamic content here</td>
</tr>
<tr>
<td>bottom image</td>
</tr>
</table>

Then I read about div tags and that they were the preferred method and tried creating the same situation with div tags:

<div id='top' style="z-index: 1; position: relative; right: 0%; top: 20px; background-color:; width: 180px; padding: 10px; color: white; border:; "><IMG SRC="images/generic_01.gif"></div>

<div id='side' style="z-index: 1; position: relative; right: 0%; top: 0px; background-color:; width: 180px; padding: 10px; color: white; border:; "><IMG SRC="images/generic_02.gif"></div>

<div id='my_page2' style="z-index: 2; position: relative; right: -192px; top: -650px; background-color: ; width: 550px; padding: 10px; color: white; border: #0000cc 2px dashed; "> {$output}</div>

{include file="footer.tpl"}

By manually aligning the various elements I got the template layed out where it looked correct, but as soon as I sent the dynamic content to the page it forced the bottom image down lower.

What I am trying to do is create a basic template for a website and then feed in the content with Smarty. But, I need to figure out how to somehow dynamically fit the content into the template. The problem is that if the content from the db is too large or too small it distorts the template.

I have been reading about css and div tags as much as I can but am not getting what I am doing wrong. Would anyone be kind enough to offer some advice?

Thanks!