My background does not repeat when there is text on it, why?

http://www.casleague.com ^ you can view the complete source there

How come the the image http://casleague.com/images/content/bg.gif does not repeat -y like I coded it?

CSS

.main { background: transparent url("../images/content/bg.gif") repeat-y;
        width: 960px; 
        font-family: Tahoma;
        color: #0c8cbd;
        text-decoration: none;
        word-spacing: normal;
        text-align: justify;
        letter-spacing: 0;
        line-height: 1.2em;
        font-size: 11px; }

     .content { padding: 20px; height:100%; }      
         .leftside { width: 600px; float: left; }
         .rightside { width: 300px; float: right; }

HTML

<div class="main">
   <div class="content">
     开发者_运维知识库 <div class="leftside">
         123
         12
         312
         3123
         123
         123
      </div>
      <div class="rightside">
         123
         123
         123
         123
         123
      </div>
   </div>
</div>

---

Believe it or not, your background is repeating. However, your <div class="main"> is only 40 pixels high. This is what it looks like when you click on the element in Firebug:

Notice how small the highlighted area is. And the clientHeight in the DOM window at the bottom right reads "40".

The issue is that by default most containers won't expand to the size of their contents if the contents are only floats. I've had issues with this before. Add overflow: auto; to the style block for .main, and it should work. If not, add a <br clear="all" /> after the closing tag for <div class="rightside">.

---

Adding a <div style="clear:both"></div> after the leftside and rightside divs will fix the problem. Those divs are floating and are the only content of the content div, causing it to have zero calculated height. The vertical paddings of content are 40px total, making main have 40px height - and your background actually is repeating on those 40px.

---

Try changing your "." to "#" and "class" to "id". And putting right before left in the page.

#main { background: transparent url("../images/content/bg.gif") repeat-y;
        width: 960px; 
        font-family: Tahoma;
        color: #0c8cbd;
        text-decoration: none;
        word-spacing: normal;
        text-align: justify;
        letter-spacing: 0;
        line-height: 1.2em;
        font-size: 11px; }

    #content { padding: 20px; height:100%; }      
         #leftside { width: 600px; float: left; }
         #rightside { width: 300px; float: right; }

    <div id="main">
       <div id="content">
          <div id="rightside">
             123
             123
             123
             123
             123
          </div>
<div id="leftside">
             123
             12
             312
             3123
             123
             123
          </div>
       </div>
    </div>