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.

[Johannes Koch]

Garmt de Vries wrote:

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:

[table-like layout]

You want a table-like layout. So you have to use the table* values for
the display property (CSS, don't work in WinIE <= 6.0) or use HTML tables.

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

[Steve Pugh]

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

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.

I can't think of a way to do it with ems (other than nasty stuff with
z-index and em scaled images), but the following works with percentage
sized columns: http://steve.pugh.net/test/test66.html

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/>

[Lauri Raittila]

In article Garmt de Vries wrote:

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.
That's easy.
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
Server seems to have some slowdown... You are right that it is not good
solution. Anyway you could use em and huge white area on right of image,
and blue body backgroud. That might degrade badly though
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
Replace CSS that you have with this:
---
html, body {margin:0;paddi ng:0;height:100 %; background:yell ow}
[foo], html, body, #menu {min-height:100%;hei ght:auto;}

#content {
background: url("transition .gif") yellow repeat-y;
border-left:blue solid 15em;
margin-left: -40px;
/* This padding has to have some value, as collapsing margins work in
Opera 7*/
padding:0.5em;
padding-left:60px;

}

#menu {
background: url("transition .gif") blue right repeat-y;
position: absolute; top: 0; left: 0;
height:100%;
width: 15em;
}
---

Practically, have that transition picture in both parts, and position
them one over another.

There is also some code that tries to make menu at least as high as
viewport. Not tested exept Opera 7.5p1, might work on IE, Might work on
Mozilla and maybe in others too. [foo] is supposed to hide rule from IE,
but I'm not sure if I recalled correctly how to use it...

If you don't need ot to be as high as viewport, just remove all vertical
stuff.
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.

I have answered it few times, exept not exactly in this form. Usually it
is about border in between ;-)
--
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.

[Lauri Raittila]

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.

--
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]

> In article Garmt de Vries wrote:

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

I was hoping to glean some information from this thread, since I have
the same problem.

http://www.tsmchughs.com/

div#navigation has position absolute, top left, green background. It
should be an easier case, since there's no image involved. Just the
green background for #navigation, and white background for body. On
short pages, I have green for nav, white for body. On long pages, the
green nav only extends a bit below the first screen. Beneath that, it
changes to white. This isn't catastrophic, but it'd look nicer if the
green extended down. I didn't think there was a solution, but still I
tried what was suggested.

Lauri Raittila wrote: html, body {margin:0;paddi ng:0;height:100 %; background:yell ow}
[foo], html, body, #menu {min-height:100%;hei ght:auto;} [selector for bg image snipped; I don't think it was relevant...] #menu {
background: url("transition .gif") blue right repeat-y;
position: absolute; top: 0; left: 0;
height:100%;
width: 15em;
}

I played around with height and min-height on my localhost test
server, with no luck. Tested in MSIE 5/Win, O7.23, and Moz 1.3. Is
there a simple solution that I'm missing?

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

[Steve Pugh]

Lauri Raittila <la***@raittila .cjb.net> 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

I like. Very obvious, surprised I didn't think of it. ;-)
http://www.student.oulu.fi/~laurirai...on/index2.html

Hmm, seems rather inelegant. But that appears to be mostly down to the
need to get it working in IE...

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/>

[Lauri Raittila]

In article Brian wrote:

In article Garmt de Vries wrote:

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

I was hoping to glean some information from this thread, since I have
the same problem.

I answered about this same question few days ago. Independently in
alt.html and sfnet.viestinta .www IIRC. Maybe it is fashionable...

http://www.tsmchughs.com/

div#navigation has position absolute, top left, green background. It
should be an easier case, since there's no image involved.
Maybe, maybe not.
Just the green background for #navigation, and white background for body. On
short pages, I have green for nav, white for body. On long pages, the
green nav only extends a bit below the first screen. Beneath that, it
changes to white.
If I understood you correctly, problem is only in long pages. (so I
ignore short ones)
This isn't catastrophic, but it'd look nicer if the
green extended down. I didn't think there was a solution, but still I
tried what was suggested.
You missed that {border:15em blue solid} in that suggestion - that was
the point in it, height stuff was just experiment.
Is there a simple solution that I'm missing?

This could be what you need:

body {border-left:4px solid green;margin-left:0;}
body > div {border-left:8em solid green;}

Of course that needs lots of work, but your CSS is so hard to follow I
gave up. IE certainly don't get it whitout changes.

--
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.

[Stephen Poley]

On Mon, 19 Jan 2004 17:21:40 GMT, Brian
<us*****@juliet remblay.com.inv alid-remove-this-part> wrote:

I was hoping to glean some information from this thread, since I have
the same problem.

http://www.tsmchughs.com/

div#navigati on has position absolute, top left, green background. It
should be an easier case, since there's no image involved. Just the
green background for #navigation, and white background for body. On
short pages, I have green for nav, white for body. On long pages, the
green nav only extends a bit below the first screen. Beneath that, it
changes to white. This isn't catastrophic, but it'd look nicer if the
green extended down. I didn't think there was a solution, but still I
tried what was suggested.

Not sure, but does this help?

http://www.xs4all.nl/~sbpoley/webmatters/layout3.html

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Garmt de Vries]

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?

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.

But your contributions have given me some food for thought. I'll
experiment a bit more.

Thanks,
Garmt.