[css-d] Relative positioning/collapsing margins (?) and 100% height

2006-02-06 Thread Bruce MacKay 
Hello all,

I'm seeking help on two problems: positioning of material within a 
wrapper and achieving 100% height in pages with "short" content.

The following pages (with embedded css) differ only in the presence 
of a sub-navigation element.  In both, I'm having problems in 
positioning the content to start 10-20 px below the navigation div.

http://temporarius.massey.ac.nz/menu1.htm
http://temporarius.massey.ac.nz/menu2.htm

In Firefox and Opera, the content starts hard up against the bottom 
of the navigation div.  It seems that the only way to achieve control 
of where the content starts is to place a 60-80px top margin in the 
content div - but this doesn't make sense to me as the top of the 
content div seems to be being measured from the bottom of the logo 
div, not the navigation div.  In IE, things seem better - the top of 
the content div (top margin = red) appears where I expect it to be 
relative to the bottom of the navigation div in menu2.htm, but not in 
menu1.htm.

I don't understand what's going on and consequently cannot work out 
the fix needed.  Any guidance please?


The second issue is how to I make the page fill the vertical space of 
the screen when the amount of material in the content div is short.

Thanks in advance,

Bruce


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Relative positioning/collapsing margins (?) and 100% height

2006-02-07 Thread Roger Roelofs 
Bruce,

On Feb 7, 2006, at 2:53 AM, Bruce MacKay wrote:

> I'm seeking help on two problems: positioning of material within a
> wrapper and achieving 100% height in pages with "short" content.
>
> The following pages ... In both, I'm having problems in
> positioning the content to start 10-20 px below the navigation div.
>
> http://temporarius.massey.ac.nz/menu1.htm
Floated elements are taken out of the document 'flow.'  Statically 
positioned elements will flow under the floats even thought the text 
inside those elements won't.  In your case, adding clear: left; to 
#content will fix this.

> The second issue is how to I make the page fill the vertical space of
> the screen when the amount of material in the content div is short.
This comes up a lot.  In the projects I've done it has always turned 
out to be a red herring.  By the time the project was finished, every 
page had so much content that the footer was out of view below the 
window.   All the work to make the footer stick to the bottom on short 
pages was a waste of time.  If you _really_ need it, make html, body 
and #wrapper have a min-height: 100%; and add position: relative; to 
#wrapper.  That way you can absolutely position the footer at bottom: 
0;  Clear as mud!  Fortunately, there are a number of examples of this 
to learn from.
-- 
Roger Roelofs
"Remember, if you’re headed in the wrong direction,
God allows U-turns!"
  ~Allison Gappa Bottke
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/