div height problem for coloured column

[Garmt de Vries]

I would have guessed that this issue had been discussed to death, but I
couldn't find an answer to my problem in the ciwas archives. So, at the
risk of asking something trivial, here goes:

I want to have a page that looks as follows: at the left, a blue column
with a navigation menu. The rest of the page, with a white background, is
for the content. The blue fades smoothly into the white.

I managed to do this by using a background image for the body, repeated
vertically. This image is a 200px wide blue field, with a smooth
transition to white. A div with the menu is absolutely positioned at
the right, so it overlaps the blue of the background image. You can see
the result at http://www.phys.uu.nl/~gdevries/test/goal.cgi

The problem with this solution is that I have to specify the width of the
menu in px. I would of course prefer to specify it in em, but then the
trick with the background image doesn't work.

The best I could do so far is to set the background-color of the menu div
to blue and its height to 100%. According to the CSS2 specs, its height
should then be the height of the containing box, which is the body. I
understand from previous posts that the height of the viewport is taken in
this case.

Now if the content is taller then the height of the viewport, and you
scroll down, you see that the menu div with its background colour is
really only as high as the viewport; underneath you see the body
background colour: see http://www.phys.uu.nl/~gdevries/test/test.cgi

My question is: how can I make this menu div stretch all the way to the
bottom of the body?

I have read numerous posts about centering in the viewport, or filling the
viewport if the content is short, but no answer to this particular
question.

Thanks for any thoughts you can give!

Garmt de Vries.

[Steve Pugh]

Garmt de Vries <gd******@phys. uu.nl> wrote:

On Mon, 19 Jan 2004, Lauri Raittila wrote:

In article Steve Pugh wrote:

> http://steve.pugh.net/test/test66.html

http://www.student.oulu.fi/~laurirai...ion/index.html
http://www.student.oulu.fi/~laurirai...on/index2.html

Thanks all for your suggestions.

Steve's method, and Lauri's 1st method seem to work fine on Opera 7.21
(haven't tested others yet). They present one problem, though: they both
require the menu div to come before the content div. Switching off CSS
forces you to go through the entire menu before you reach the content. I
would really like to have the menu after the content in the HTML code.

For my method just float the content right instead of floating the nav
left. The content now has width:75%; and the nav has margin-right:
75%;, the image and styles for the background remain unchanged.

With Lauri's method this sort of simple swap isn't as easy. A
position: based method like Lauri's second suggestion is more amenable
to that sort of manipulation.

However, I've just thought of something else. Let me see if it
works...

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>

[Steve Pugh]

Steve Pugh <st***@pugh.net > wrote:

However, I've just thought of something else. Let me see if it
works...

http://steve.pugh.net/test/test66-em.html

It works. Though I'm certain that in theory it should break when the
nav is longer than both the content and the window, but it doesn't
seem to in my test browsers (Opera 5 and 7.23, IE 5.01 and 6, Netscape
6, Mozilla 1.5). Even degrades fairly gracefully in Netscape 4.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>

[Garmt de Vries]

On Tue, 20 Jan 2004, Steve Pugh wrote:

Steve Pugh <st***@pugh.net > wrote:

http://steve.pugh.net/test/test66-em.html

It works. Though I'm certain that in theory it should break when the
nav is longer than both the content and the window, but it doesn't
seem to in my test browsers (Opera 5 and 7.23, IE 5.01 and 6, Netscape
6, Mozilla 1.5). Even degrades fairly gracefully in Netscape 4.

Yes, this looks good. Needs a larger background image, but that can be
taken care of.

I put your method in my ply-around script at
http://www.phys.uu.nl/~gdevries/test/pugh2.cgi to test for various font
sizes and menu/content heights.

It works fine in Opera 7.21 (Linux), Konqueror 3.03 (Linux) too.

Thanks a lot!

Best,
Garmt.

[Lauri Raittila]

In article Garmt de Vries wrote:

On Mon, 19 Jan 2004, Lauri Raittila wrote:

In article Steve Pugh wrote:

[transition of color in middle of page]

I can't think of a way to do it with ems [...], but following
works with percentage sized columns:
http://steve.pugh.net/test/test66.html
Hm. I managed to think two ways, but I haven't tested them much, just
Opera 7.5p1:

http://www.student.oulu.fi/~laurirai...ion/index.html
http://www.student.oulu.fi/~laurirai...on/index2.html

Maybe I will get some testing done sometime, but now I need to go buy
some food.

Thanks all for your suggestions.

Steve's method, and Lauri's 1st method seem to work fine on Opera 7.21
(haven't tested others yet). They present one problem, though: they both
require the menu div to come before the content div. Switching off CSS
forces you to go through the entire menu before you reach the content. I
would really like to have the menu after the content in the HTML code.

Perhaps I'm too demanding?

You aren't, it took 30 seconds to change it:
http://www.student.oulu.fi/~laurirai...on/index3.html
Lauri's second attempt, with an absolutely positioned menu, doesn't pose
this problem. Unfortunately, it doesn't work as intended if you have to
scroll below the lower edge of the viewport... just like my original
attempt.

Really? Yes it seems to do now. I tested it god knows how many times and
couldn't get it break. I must have changed something accidentally. It
seems worse way anyway, so it is not big problem
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Brian]

Stephen Poley wrote:

On Mon, 19 Jan 2004 17:21:40 GMT, Brian wrote:

http://www.tsmchughs.com/

On long pages, the green nav only extends a bit below the first
screen. Beneath that, it changes to white.

Not sure, but does this help?
http://www.xs4all.nl/~sbpoley/webmatters/layout3.html

Thanks for the link to the layout idea. It doesn't work for me because
#navigation has position: absolute. On balance, I'd rather keep the
nav in a sensible place in the html than have the green extend down
the page as I'd like.

It's a real pity that I can't use display: table-cell with position:
absolute; that would at least solve the problem in Safari, Moz, and Opera.

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

[Lauri Raittila]

In article Brian wrote:

Thanks for the link to the layout idea. It doesn't work for me because
#navigation has position: absolute. On balance, I'd rather keep the
nav in a sensible place in the html than have the green extend down
the page as I'd like.

It's a real pity that I can't use display: table-cell with position:
absolute; that would at least solve the problem in Safari, Moz, and Opera.

I don't think your structure will change worse if you wrap all content
exept menu in one div, and give it suitable green left border. Then it
works in IE. That is what I tried to write in my other post.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.