Is anyone able to take a look and see if they can spot why my info is falling over the bottom background image. I've stared so long I'm going batty -
http://www.kayzoesolutions.com/diape..._template.html Thanks so much.

It would really help for you to post all relevant code.

But from what I can see by page sourcing and just looking, is that you have too much content in that box, and it doesn't look like the box is changing size. If that is a background image, then you have to take content out to make it fit, or make the background image taller.

Have you ever considered learning to do this without using tables? Doing things this way is only going to cause problems in the long run.

The issue is that it's using a cms so it will need to expand with the amount of text written in. Here is the style sheet:

body {
    margin: 0px;
    padding: 0px;
    background-color:#e4ecd0;
}
* {
    margin: 0px;
    padding: 0px;
}
.clear {
    font-size: 1px;
    clear: both;
    height: 1px;
}

#container {
    margin-right: auto;
    margin-left: auto;
    position: relative;
    width: 977px;
    background-image:url(http://www.kayzoesolutions.com/diaperinthebag/ditb_bgd.gif);
    background-repeat: repeat-y;
    margin-top: 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #565655;
}
#logo {
    display: block;
    padding-bottom: 5px;
}
#content {
    background-image:url(http://www.kayzoesolutions.com/diaperinthebag/ditb_bgd_top.gif);
    background-repeat: no-repeat;
    
}
#bottom {
    background-image:url(http://www.kayzoesolutions.com/diaperinthebag/ditb_bgd_bottom.gif);
    background-repeat: no-repeat;
    background-position: left bottom;
}

#left {
    
}

#left h2 {
    color: #c9ce57;
    font-family: Century Gothic, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    line-height: 18px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-top: 20px;
}
#left ul {
    text-align: left;
    padding-left: 15px;
    list-style-type: none;
    padding-bottom: 15px;
    line-height: 16px;
    padding-top: 10px;
}
#left ul a {
    color: #747176;
    text-decoration: none;
    font-size: 12px;
}
#left ul a:hover {
    color: #a0d6f8;
}




#right {
    padding-top: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
}
#mainmenu {
    display: block;
    height: 26px;
    padding-left: 400px;
    padding-right: 5px;
    padding-top: 6px;
    
}

#mainmenu li {
    display: inline;
    padding-right: 2px;
    padding-left: 2px;
}

#mainmenu li a {
    color: #747176;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
}


#homepic {
    float: left;
}
#hometext {
    padding-left: 50px;
    float: left;
    width: 160px;
    padding-top: 130px;
}
#contpad {
    padding-top: 25px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 15px;
}


#right p {
    padding-bottom: 12px;
}
#right h2 {
    font-size: 20px;
    font-weight: normal;
    color: #60473b;
}
#right ul {
    padding-bottom: 12px;
    padding-left: 15px;
    list-style-position: outside;
}
#right ol {
    padding-bottom: 12px;
    padding-left: 15px;
    list-style-position: outside;
}

#right #hometext p {
    text-align: right;
}

#right #hometext p span {
    font-size: 20px;
    font-weight: normal;
    color: #60473b;
    line-height: 21px;
}
#cart {
    position: absolute;
    left: 180px;
    top: 150px;
}
#cart a {
    background-image: url(http://www.kayzoesolutions.com/diaperinthebag/view_cart.gif);
    background-repeat: no-repeat;
    height: 22px;
    padding-left: 30px;
    padding-top: 3px;
    display: block;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    font-size: 11px;
}
#footer {
    color: #747176;
    font-family: Century Gothic, Helvetica, sans-serif;
    font-size: 10px;
    height: 13px;
    width: 680px;
    margin-right: auto;
    margin-left: auto;
    text-align: right;
    padding-right: 63px;
    margin-top: 3px;
    padding-bottom: 12px;
    line-height: 12px;
}

#footer a {
    font-family: Century Gothic, Helvetica, sans-serif;
    font-size: 10px;
    color: #747176;
    text-decoration: none;
    padding-left: 2px;
    padding-right: 2px;
    }

For the other post, I can't get the div tags to work around the cms properly to expand, so I insert tables in where the php include tags go. If you can figure it out , I'd love to hear. Here is the admin area for the demo - http://www.kayzoesolutions.com/demo/storeadmin user: admin password: demo and you can view changes at www.kayzoesolutions.com/demo/index.php The template is in the "template" section. This is just a demo on my site so it's fine for anyone to access.

I have to agree with wayfarer. Using tables will make this harder because you can't move anything around xD

And because the background image for #bottom is so large, it doesn't think that it's going out of anything.

Suggestions? 1. Change to divs, aka get rid of all the tables and float the navigation to the left. 2. Do (almost) what you've been doing. Take #content out of #bottom because they don't need to be nested. Use #bottom for all the content of the site, and add a padding-bottom to #bottom of however many px you need to get the content in the box. 3. Divs will automatically expand height-wise (as long as you don't define a height) for any content that you have. It will make things easier!

Making this a div layout will make everything easier. Tables are not fun to work with...ever. And as wayfarer said, it will help things in the long run.

You have complete control over the template. Get rid of the tables and you'll be doing yourself a favor xD