Quote:
Originally Posted by dalep282
In particular, I cannot seem to get the page wrapper, or footer divs to extend to the hight of the page.
|
To remove the space between
#nav and
#wrapper, remove the top margin from
#content. This margin is collapsing through
#wrapper's top border and creating the gap you're seeing. (Perform a Web search for "CSS margin collapsing" if interested in the concept.)
To deal with the space above
#footer, first I would do something that isn't directly related to avoid later confusion: set
overflow: auto on
#content so that
#content fully encapsulates
#content-right-container and
#content-left (which both have a non-default
float property value). (To understand the hanging float concept, you can read the first two sections of the article
Clearing Floats (i.e., the intro section and "Understanding the Problem").)
The above will cause your
height: 0 declaration on
#content to become meaningful (and screw up the layout). Delete that. It will also cause you the bottom padding on
#content to materialize. Set that to
0 unless you want that 12 pixels of space.
Once you've done that, simply remove the bottom margin from
#content-left.