Background Color Issue with Side-by-Side <div>s

[Ben Gribaudo]

Hello!

I am working on revising my Web site template. The main part of the page is
divided into two columns (each a <div>)--a side bar on the left and the main
content area on the right. Both <div>s have a different background color.
The side bar <div> extends partly down the page while the main content area
<div> goes almost all the way down.

The problem I am having is in getting the side bar's background to line up
with the main content area's background. Because the side bar is shorter
than the main content area, it's background color doesn't extend down the
page as far as I would like it.

I found a work-around for in IE 6 and NS 6--setting the container <div>s
background-color. It's NS 7.1 that gives me the problem.

Example:
http://www.bengribaudo.com/dev/Test-bg.htm

Thanks!

Ben Gribaudo
Baltimore, MD - www.bengribaudo.com

[Alex Bell]

On Fri, 26 Dec 2003 16:30:13 GMT, "Ben Gribaudo"
<bengribaudoN_O_@_S_P_A_Mverizon.net> wrote:

Hello!

I am working on revising my Web site template. The main part of the page is
divided into two columns (each a <div>)--a side bar on the left and the main
content area on the right. Both <div>s have a different background color.
The side bar <div> extends partly down the page while the main content area
<div> goes almost all the way down.

The problem I am having is in getting the side bar's background to line up
with the main content area's background. Because the side bar is shorter
than the main content area, it's background color doesn't extend down the
page as far as I would like it.

I found a work-around for in IE 6 and NS 6--setting the container <div>s
background-color. It's NS 7.1 that gives me the problem.

Example:
http://www.bengribaudo.com/dev/Test-bg.htm

Thanks!

Ben Gribaudo
Baltimore, MD - www.bengribaudo.com

Looks fine to me with Opera 7.23 - there is a lighter grey left column
with waterfall graphic, and a darker grey right column with text, all
on another grey background? The column colours extend down to the
same level.

Regards, Alex

[bill drescher]

Alex Bell wrote:

On Fri, 26 Dec 2003 16:30:13 GMT, "Ben Gribaudo"
<bengribaudoN_O_@_S_P_A_Mverizon.net> wrote:

Hello!

I am working on revising my Web site template. The main part of the page is
divided into two columns (each a <div>)--a side bar on the left and the main
content area on the right. Both <div>s have a different background color.
The side bar <div> extends partly down the page while the main content area
<div> goes almost all the way down.

The problem I am having is in getting the side bar's background to line up
with the main content area's background. Because the side bar is shorter
than the main content area, it's background color doesn't extend down the
page as far as I would like it.

I found a work-around for in IE 6 and NS 6--setting the container <div>s
background-color. It's NS 7.1 that gives me the problem.

Example:
http://www.bengribaudo.com/dev/Test-bg.htm

Thanks!

Ben Gribaudo
Baltimore, MD - www.bengribaudo.com

Looks fine to me with Opera 7.23 - there is a lighter grey left column
with waterfall graphic, and a darker grey right column with text, all
on another grey background? The column colours extend down to the
same level.

Regards, Alex

with Mozilla the left col is much shorter than the main text col on the
right. Can't you set them both to the same height ?

--
Bill Drescher
william {at} TechServSys {dot} com

[Ben Gribaudo]

"bill drescher" <no****@Spamcop.net> wrote in message
news:vu************@corp.supernews.com...

with Mozilla the left col is much shorter than the main text col on the
right. Can't you set them both to the same height ?

That is the problem: The height of the column on the right varies from page
to page so it's not practical to give it a fixed height.:-(
Ben :-)
www.bengribaudo.com

[bill drescher]

Ben Gribaudo wrote:

"bill drescher" <no****@Spamcop.net> wrote in message
news:vu************@corp.supernews.com...

with Mozilla the left col is much shorter than the main text col on the
right. Can't you set them both to the same height ?

That is the problem: The height of the column on the right varies from page
to page so it's not practical to give it a fixed height.:-(
Ben :-)
www.bengribaudo.com

How about (untested !):
make the left div as wide as both divs would be,
position the "right" div inside the left div, but to the right.

then the "left" div would be forced to be as high as the right so as to
enclose it, but it would look as if they were side by side

--
Bill Drescher
william {at} TechServSys {dot} com

[Ben Gribaudo]

Hi Bill,

This is a great idea! It fixed that problem in NS 7.1.

Alas! Now IE 6 and NS 6 don't show it right. For some reason, IE 6 has this
space between the image on the left and the main column. NS 6 displays the
columns one above the other. :-(

Code is at:
http://www.bengribaudo.com/dev/Test2-bg.htm

Any ideas, anyone?

Thanks!

Ben Gribaudo
www.bengribaudo.com
"bill drescher" <no****@Spamcop.net> wrote in message
news:vu************@corp.supernews.com...

Ben Gribaudo wrote:

"bill drescher" <no****@Spamcop.net> wrote in message
news:vu************@corp.supernews.com...

with Mozilla the left col is much shorter than the main text col on the
right. Can't you set them both to the same height ?

That is the problem: The height of the column on the right varies from page to page so it's not practical to give it a fixed height.:-(
Ben :-)
www.bengribaudo.com

How about (untested !):
make the left div as wide as both divs would be,
position the "right" div inside the left div, but to the right.

then the "left" div would be forced to be as high as the right so as to
enclose it, but it would look as if they were side by side

--
Bill Drescher
william {at} TechServSys {dot} com