Border affecting background repeat

[KeredDrahcir]

I've got a really wierd problem. I've got some nested DIVs which I'm trying to give background to. I've got the top image, bottom image and a repeating middle image to cater for different div using the same class having differnet heights.

When I put it together I get a large gap between the top, the middle and the bottom. If I put a border round it, it disappears. It doesn't make sense to me.

.main{
    background-color:#ffffff;
    border: 0 solid #ffffff;
    color: #000000;
    background: #ffffff url(bottom image) no-repeat center bottom;
    margin: 0 0 5px;
    padding: 0 0 100px;
}
 
.main div{
    padding: 0;
    margin: 0;
}
 
.main div div{
    background: #ffffff url(middle image) repeat-y center top;
    padding: 0 15px;
    margin: 0;
}
 
.main h3{
    background:#ffffff url(top image) no-repeat center top;
    color: #000000;
    border: 0;
    padding: 35px 15px 0;
    height:38px;
    margin: 0;
}

<div class="main">
    <div>
        <h3>Title</h3>
        <div><p>Content</p></div>
    </div>
</div>

If I add a one pixel border to .main div div it fixes the problem expect I don't want the border.
The only thing that changes is that the top and bottom reamin where they are but the background of the middle section repeats further at the top on bottom to meet the other two sections when I add the border.


This is best example I can give below.

Without border

+--------------------------------+
| Title                          |
+--------------------------------+
 
+--------------------------------+
|                                |
| Content                        |
|                                |
+--------------------------------+
 
+--------------------------------+
|                                |
+--------------------------------+
 

With border

+--------------------------------+
| Title                          |
+--------------------------------+
|                                |
|                                |
| Content                        |
|                                |
|                                |
+--------------------------------+
|                                |
+--------------------------------+

Images are attached.

Please help becuase I would pulling my hair our if I had any.

[Claus Mygind]

did you notice this line in your code?

.main div div{

did you really mean a double "div"

May not solve your problem but it is a start

[KeredDrahcir]

Yes I did plan to have a division nested like that. The HTML shows that I'm using an extra division for the content the keep it seperate from the header.

[KeredDrahcir]

I seem to have fixed the problem but I can't remember how and now I've got it again on a different kind division. Again it only works when I include a border which is unacceptable. Can anyone help?

[KeredDrahcir]

Look at the box model, when the border is absent, it is treated the padding as a margin. Does that help narrow down the problem?

[KeredDrahcir]

overflow:hidden solves it.