Snippet Output not producing background repetition

Hello, all. I am using MODx 0.9.6 on Ubuntu 7.0.4 (Feisty) running apache 2.x and viewing with Firefox 2.0.0.4. I am quite new to MODx, HTML, CSS, don’t know a thing about PHP and have been finding MODx wonderfully useful.

I’m using a two column layout in my primary template with recent blog posts in the left margin using Ditto and the content in the right margin. I find that if the Ditto output exceeds the length of the content, the background image does not repeat, i.e., there is an ugly white area after the content runs out and before the footer. It could very well be that I have mangled the template and my CSS. How do I fix this aesthetic problem?

Here in my template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>[*pagetitle*] - [(site_name)]</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" href="[(site_url)][*CSS*].css" rel="stylesheet" />
<style type="text/css">
#container { background: url([(site_url)]assets/images/[*BackgroundImage*]Trans.jpg); background-repeat: repeat}
#mainbanner { background: url([(site_url)]assets/images/[*BackgroundImage*]Banner.jpg);}
</style>
</head>
<body>
<div id="container">
<div id="leftbanner" class="banner left"><p><img src="[(site_url)]/assets/images/SOWLogo.jpg" alt="Sower" height="96" width="158" id="logo" /></p><p>Promoting Spiritual Growth</p></div>
<div id="mainbanner" class="banner right">{{branding}}</div>
<div id="mastermenu" class="right">[[Wayfinder? &startId=`0`]]</div>
<div id="leftmargin" class="left">
<h2>Coworker Section</h2>
[!WebLogin? &tpl=`Logintpl`!]
<p>[!Personalize? &yesChunk=`CoworkerWelcome` &noChunk=`CoworkerHowto` &ph=`coworker`!]</p>
<h2>Current Ideas:</h2>
<span style="font-size:smaller">View <a href="[(site_url)][~27~]">Expanded</a> Summary Page</span>
<p>[!Ditto? &parents=`33` &tpl=`BlogListShort` &noResults=`No thoughts have been posted yet` &paginate=`1` &extenders=`summary` !]</p>
<p>[+previous+] [+pages+] [+next+]</p>
<p></p>
</div>
<div id="content" class="right">{{[*Specialization*]}}</div>
</div>
<div id="footer">{{siteinfo}}</div>
</body>

The background image is set via a TV hence the style statement in the template.
{{[*Specialization*]}} includes the content and allows me to slightly modify the layout via TV’s without creating new templates for minor changes, e.g, download or blog as opposed to normal pages. Here is the chunk for the home page which has a bad case of the no repeating background problem:

[*content*]

as opposed to the Specialization for a blog page for example:
<h1>[*pagetitle*]</h1>
[*content*]
<p></p>
[!Personalize? &yesChunk=`Empty` &noChunk=`MustLoginToComment` !]
[!Jot? &subscribe=`1` &moderated=`1` &pagination=`10` &canpost=`coworkers` !]

Here is my CSS:
body {
margin: 0px;
padding: 0px;
}

#container {
color: #004800;
}

#leftbanner {
/*padding: 0px;
margin: 0px;*/
}

#leftbanner img {
border: 2px solid darkgoldenrod;
}

#leftbanner p {
margin-top: .3em;
margin-bottom: .3em;
line-height:.8em;
font-style: italic;
font-size: smaller;
text-align: center;
}

#mainbanner {
padding-left: 20px;
text-align: left;
}

#bannerl1 {
margin-bottom: 3px;
margin-top: 0px;
}

#bannerl2 {
padding-left: 20px;
}

#bannerl3 {
padding-left: 40px;
}

#mastermenu ul {
list-style-type: none;
margin: 0px;
background-color: maroon;
padding: 0.1em 0 0.1em 0.1em;
}

#mastermenu ul li {
background-color: maroon;
color: palegoldenrod;
border-right: 2px solid palegoldenrod;
padding: 0.1em 0.2em 0.1em 0.2em;
text-align: center;
font-weight: bold;
display: inline;
position: relative;
}

#mastermenu ul li a {
color: palegoldenrod;
text-decoration: none;
}

#mastermenu ul li:hover {
background-color: indianred;
color: cornsilk;
border-color: brown;
z-index: 50;
}

#mastermenu ul li ul {
display: none;
position: absolute;
top: 1.4em;
left: 0;
}

#mastermenu ul li ul li {
display: block;
width: 12em;
text-align: left;
background-color: #990000;
border-top: 2px solid palegoldenrod;
border-bottom: 0px;
border-right: 0px;
z-index: 100;
}

#mastermenu ul li:hover ul {
display: block;
}

#content {
min-height: 250px;
font-size: larger;
line-height: 1.5em;
padding: 0.5em;
}

#leftmargin {
color: darkOliveGreen;
}

#footer {
background: wheat;
color: brown;
font-size: smaller;
text-align: center;
margin-top: 0px;
padding: 1em;
clear: both;
}

.banner {
height: 8em;
min-height:100px;
color: maroon;
border-bottom: 6px solid #8d7700;
}

.left {
border-right: 6px solid #8d7700;
width: 240px;
padding-left: 5px;
padding-right: 5px;
float: left;
}

.right {
margin-left: 250px;
min-width: 250px;
border-left: 6px solid #8d7700;
}

.button {
margin-right: 8px;
}

a {
color: darkGoldenRod;
}

a img {
border:none;
}

I’m finally getting close to publishing so any help in resolving this blemish would be greatly appreciated. Thanks - John

This turned out to be my ignorance of HTML and CSS. I replaced the snippet output with text and encountered the same problem. I had a layout of:

<div id="container"> <!-- the one with the background image -->
<div id="leftmargin"></div> <!-- floats left -->
<div id="content"></div> <!-- floats right -->
</div> <!-- end of container -->
<div id="footer"> <!-- clear:both -->
</div>

Once I extended the overall container to include the footer, all worked fine. I do not understand why the container div did not expand to contain the entirety of the leftmargin and content divs it contained. More for this newbie to learn! Sorry for the false alarm - John

Floating a container makes that container’s containing container resize differently unless explicitly defined. I find it easier to debug CSS using Firefox’s Web Developer Toolbar you can find on the Mozilla website.

</container>