Well since I’m the web guy I figured I would share my pitfalls that I have come across when coding the site.  One of the most important things I have come across is having my webpage size to the content that is in it.  My example will cover the main content area of Gaslamp Games with the use of three images; top, tile, and bottom.

So let’s get down to it.  First let us start with some simple CSS to define the images that will be used.  We are going to create three IDs one for each of the three areas of the content area; top, tile, and bottom.

#content-top{
background: url("content_top.png"):
width: 800px; height: 20px;
}
#content-tile{
background: url("content_tile.png") repeat-y:
width: 800px; min-height: 600px;
}
#content-bot{
background: url("content_bot.png"):
width: 800px; height: 20px;
}

And the HTML to display this:

<div id="content-top"></div>
<div id="content-tile"></div>
<div id="content-bot"></div>

Pretty simple.  You’ll notice that are tile area has the min-height attribute set.  This allow a minimum amount of tiling in case your content doesn’t fill it out.  You may be tempted to throw your content generating loop or static content in the “content-tile” div but you may notice that once you start putting content in there that some browsers (Chrome, IE, Safari) will have a space between the divs ruining your work; Firefox will render this just fine.  In interests of keeping the look the same across all browsers I search for the cause to this problem.  As it turns out the default margins the the previously mention browsers cause this image gap to happen. To fix this we should create another div that will whole all of our content with the fix to the error.  This will also have the added benefit of allowing us to shrink our content area while persevering our images in our tile div.

#content-top{
background: url("content_top.png"):
width: 800px; height: 20px;
}
#content-tile{
background: url("content_tile.png") repeat-y:
width: 800px; min-height: 600px;
}
#content-main{
padding-top: 1px;
padding-bottom: 1px;
width: 600px;
}
#content-bot{
background: url("content_bot.png"):
width: 800px; height: 20px;
}

Our HTML then becomes:

<div id="content-top"></div>
<div id="content-tile">
    <div id="content-main">
    </div>
</div>
<div id="content-bot"></div>

The two padding entries prevent the margin error from happening and allow our nice dynamic layout to accept as much or as little content as we can generate.

Hopefully this helps someone just starting out.  Again I am not a professional and welcome any comments or better suggestions if you have them.  Happy Coding!