Consider the following markup:
</div><!-- textNav -->
</div><!-- textContainer -->
This is intended to be a Text Navigation Panel at the bottom of each page. The DIV textContainer is supposed to stretch the width of the site, and be a virtual black stripe across the bottom of the site. The DIV textNav I have set to a width of 1000px (the width of the main container) and in the css, margins left and right set to auto. Then, each of the column DIVS will have a series of links to outside sources, and pages within the site.
I have a background color of black on the DIV textContainer, which I wanted to provide the black stripe and background for the other divs, that would expand as necessary depending on the content of the inner divs.
When I implemented this, it didn't work. In Chrome's Element Inspector, the DIV textContainer shows a full site width, but height of 0px. The DIV textNav shows a 1000px width, and height of 0px. So, it appears that the contents of the column DIVS aren't having any effect on the container divs.
I'm sure it's positioning relative to each other that is causing my problem, but I'm confused as to the right way to accomplish this. Any suggestions are appreciated.