2 column layout with different bg colors

[Brian]

I've got what I think is a fairly simple design aim: left column for
ul#navigation, rest of viewport for everything else (div#content,
copyright notice, address). Because ul#navigation comes after
div#content, I'm using position: absolute to place it in the left top
corner of the window, and margin-left on body element to provide the
space necessary.

I'd like to have a green background for the navigation, white on black
for everything else. To that end, I've set the height on #navigation
to 100%. It works on short pages. However, when one scrolls down on
long pages, the green background of the left column disappears.

< http://www.tsmchughs.com/ >

I'd appreciate any tips on extending the green down the entire page,
if such a thing is possible.

--
Brian
follow the directions in my address to email me

[William Tasso]

Brian wrote:

I've got what I think is a fairly simple design aim: left column for
ul#navigation, rest of viewport for everything else (div#content,
copyright notice, address). Because ul#navigation comes after
div#content, I'm using position: absolute to place it in the left top
corner of the window, and margin-left on body element to provide the
space necessary.

I'd like to have a green background for the navigation, white on black
for everything else. To that end, I've set the height on #navigation
to 100%. It works on short pages.
hmmm - no it doesn't, well it does in Moz and opera but not in IE6, but of
course neither does position: fixed
However, when one scrolls down on
long pages, the green background of the left column disappears.

< http://www.tsmchughs.com/ >

I'd appreciate any tips on extending the green down the entire page,
if such a thing is possible.

Do you have any pages where the content will be 'shorter' than the
navigation in 'normal' browsing conditions? If not then make the body
background green and colour the content to suit.

or use a green background image on the body - sized to suit most 'normal'
variants

nice work ;o)

--
William Tasso - http://WilliamTasso.com

[Brian]

William Tasso wrote:

Brian wrote:

design aim: left column for ul#navigation, rest of viewport for
everything else
I'm using position: absolute to place #navigation in the left top
corner of the window, and margin-left on body element to provide
the space necessary.

I'd like to have a green background for the navigation, white on
black for everything else. To that end, I've set the height on
#navigation to 100%. It works on short pages.
hmmm - no it doesn't, well it does in Moz and opera but not in IE6

It doesn't work in IE6? How so? Is there something I didn't notice
that doesn't work?
but of course neither does position: fixed
Well, true. But I use a child selector so that IE gets absolute, and
Moz and Opera get fixed. The fixed #nav works really well. I'm quite
happy with it. But position: absolute means background color of the
left column is green only for the first screenful.

< http://www.tsmchughs.com/ >

Do you have any pages where the content will be 'shorter' than the
navigation in 'normal' browsing conditions?

Afraid so. The home page, for one.
or use a green background image on the body - sized to suit most
'normal' variants
and repeat-y, I suppose? That's a thought. Of course, it'd be nice
to have a fallback for someone who has image-loading turned off in
their graphical browser, but the image thing is at least something.
nice work ;o)

Why thank you. :)

--
Brian
follow the directions in my address to email me

[William Tasso]

Brian wrote:

...
It doesn't work in IE6? How so? Is there something I didn't notice
that doesn't work?

http://williamtasso.com/usenet/tsmchughs.jpg
--
William Tasso

[Brian]

William Tasso wrote:

Brian wrote:

It doesn't work in IE6? How so? Is there something I didn't notice
that doesn't work?

http://williamtasso.com/usenet/tsmchughs.jpg

Ah. Thanks for the screen capture. Interesting that IE5.0/Win seems
closer to Mozilla in this case (I tesed Mozilla using position:
absolute). Well, for longer pages, I don't see how IE6 is
significantly worse than 5/Win. I'm still thinking about how to make
this look a little nicer in the IE/win browsers.

--
Brian