Hi everyone!

I am having some trouble with the repeat on my outside repeat-y background. 

Here is what I want it to look like:

http://www.shahrzadraqs.com/index2.htm

Here is what it looks like now.

http://www.shahrzadraqs.com/index3.htm

The difference between the two is that index2.htm has a ridiculous number of <break> tags in order to force the background to repeat.

What is wrong with the behavior of the containing div that causes it to repeat to accommodate the <breaks> but not repeat to accommodate the other contained divs?

Here’s the code for the container:

#maincontent {
  background: url(images/center_body-bg.gif) repeat-y;
  width: 740px;
  padding: 0 40px 0 40px;
}

I have already tried “height: auto;” and “height:100%;” with no results.  I also just now thought of “display:block;” and tried it with no results.

Any suggestions?

Thanks!

Brian

try putting <div style=“clear: both”></div> just before the closing div tag of the #maincontent. I.e.

<div id=“maincontent”>

  //you code here

  <div style=“clear: both”></div>
</div>

This fixes the height issue if you have floated elements inside the maincontent (the foated elements do not count for the parent containers height..