Div Element Functions Only When It Has a Border

[jajnsn]

I am designing a site for a new foundation, and I have set April 15 as my deadline for finishing it.  It is ready except for editing the content and fine-tuning the design.  In the fine-tuning, I am wrestling with an irksome little problem that I would like to ask someone to please help me solve.  The problem is simply this: a division in the site's structure will not function as I would like for it to function unless it has a border around it.

 

The problem appears to be related to how the elements interact in the layout.  First, there is the html tag which holds the background image, a jpeg-picture of a creek with some buildings in the background and a green grove of grass (on the near side) at the bottom of the image.  I drew the grass onto the bottom of the image to give it a pretty green look and make it seamless with an identically green-colored background footer (div#bkgfoot) positioned at the foot of background image.  div#bkgfoot is styled to extend downward as the content div, sitting two levels beneath it, increases or decreases in size. It is this green div#bkgfoot element that performs awkwardly unless there is a border laced around it.

 

Specifically, if its border is removed, this green div#bkgfoot element projects upward and covers the background image, making the entire page background green.  When the border is there, the jpeg image of the creek shines through as bright as the sunny spring sun. Thus, I have one question:  How and why does the absence or presence of the division's border affect the division's behavior? Here is the url to the test site for the foundation: http://postmaterial.org/tests/signin-ap.php. At top center, I've added a link that lets you toggle between the border and borderless div#bkgfoot effects.  I have no clue as to the basis for the tag's behavior and would appreciate an explanation. Gracias.

[smerny]

try replacing the border by padding of the same size

 

i just checked (chrome dev tool, removed border and added padding:2px) and that will work... i am a bit confused as to why you are doing things this way though.

 

the bkg(footer) div has a top:1104px and the contnr (content) div is actually inside the footer with a negative margin of 1104px... why not just have a footer div below the content div?

[jajnsn]

Thanks for your suggestion, but I need to keep the green footing elastic.  It is my understanding that doing as you suggest would create a gulf between the bottom of the background image and #bkgfoot when the content div extends below the background image. Also, as you can see, while putting a green border around the footing gives it a seamless relationship to the background image, it does not explain why the border is necessary to prevent the footing from sprawling upward and over the background image. Prior to this little conundrum, I had assumed that a division's behavior and its border were perfectly unrelated. Are they?

[jajnsn]

This topic is solved. The problem related to collapsing margins.  I did not do a very good job explaining it here, for the solution was not at all complicated.  To see my re-phrased question and tips for the solutions, use this link:  http://stackoverflow.com/questions/10056479/css-div-element-functions-only-when-it-has-a-border.

 

Many thanks!