By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,487 Members | 1,067 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,487 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
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
Jul 20 '05 #2

P: n/a
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

Jul 20 '05 #3

P: n/a

"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
Jul 20 '05 #4

P: n/a
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

Jul 20 '05 #5

P: n/a
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

Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.