473,770 Members | 5,862 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

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
5 5304
On Fri, 26 Dec 2003 16:30:13 GMT, "Ben Gribaudo"
<bengribaudoN_O _@_S_P_A_Mveriz on.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
Alex Bell wrote:
On Fri, 26 Dec 2003 16:30:13 GMT, "Ben Gribaudo"
<bengribaudoN_O _@_S_P_A_Mveriz on.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

"bill drescher" <no****@Spamcop .net> wrote in message
news:vu******** ****@corp.super news.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
Ben Gribaudo wrote:
"bill drescher" <no****@Spamcop .net> wrote in message
news:vu******** ****@corp.super news.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
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.super news.com...
Ben Gribaudo wrote:
"bill drescher" <no****@Spamcop .net> wrote in message
news:vu******** ****@corp.super news.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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
3357
by: Dan Diebolt | last post by:
I need some script that change "foo" to "bar" anywhere "foo" occurs on the page once the page is loaded. Any idea how?
5
1231
by: Dré | last post by:
Hi, I'm making a FAQ-page. To keep it a little synoptic, only the questions are visible. When you klick on a certain question, the answer appears. You can find an example at: http://www.aendekerk.be/zoom/uitklappen.htm Suppose i click on "titel1", "tekst1" appears. When i click on "titel2", "tekst2" appears. But also tekst1 remains visible. I don't want this. How can i program this?
7
6749
by: Eduard Dewolf | last post by:
Hi, Im have been changing my site to make it HTML 4.01 compliant As I should, I wrapped all INPUT tags in blocks I wrapped the not visible INPUT type HIDDEN tags in first PRE, later H6 tags to comply to HTML 4.01, but this changes my layout severly In the upper right corner of http://www.dewolf.net, one can cahnge the language of the site.
2
2432
by: JJ | last post by:
I'm looking to use two div elements to create two columns within a container div element. I'd like the container div to dynamically have a height greater than the internal column with the greatest height. Is there a way to accomplish this without the use of tables? I know that absolute & float elements aren't part of the flow of the page, but the examples I've seen suggest using either one of those approaches for a column layout. ...
1
1786
by: Silky | last post by:
Iam trying to get the green footer div to sit on the bottom of all three divs so as the divs vary in height it sits off the bottom of the lowest one I cannot use absolutes because the three colum are dynamically driven maybe Iam missing something really simple? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://wwww3.org/TR/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
2
5234
by: BrianP | last post by:
Hi, I have had to invent a work-around to get past what looks like a JavaScript bug, the malfunctioning Perl-like JavaScript array functions including SPLICE() and UNSHIFT(). I have boiled it down to a very simple test case which can be cut-n-pasted into a .html file and viewed in a browser: ============================================================================
40
2517
by: fordge | last post by:
we usually use <<n as a cheaper option to multiplication when its factor of 2^n right, even for non 2^n say ix24 ==> ix(16+8) ==> (i<<4)+(i<<3) similarly divison 2^n is >>n
1
1117
by: Andreas Zita | last post by:
Hi, Im having a hard time converting my old web project to a web site in asp ..net 2.0 Right now the problem is that XslCompiledTransform isn't producing the same result as previously... First of all, it seems that any empty elements such as <div style="..."></div> or similar completely halts the transformation. Secondly, it seems that <html><body> etc tags are ignored? Previously I had
5
2005
by: Bjorn Sagbakken | last post by:
Hello I have just migrated from VS 2003 to VS 2005, and .NET framework 1.1 to 2.0 I am at the end of debugging and fixing stuff. Now there is one error I just cannot find a solution to: On some pages I have applied a small client-script to trap the enter-key beeing pressed and re-route this action. With the new version this little script still works, it traps the enter-key. BUT it causes postback-errors on many other .NET control,...
2
1936
by: MOS1 | last post by:
Folks Please help this is driving me insane The + expands but the minus fails Error src is null or not an object function Win_onLoad() { GetNameAndLink(0); } function GetNameAndLink(pkId)
0
9425
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10225
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10053
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9867
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8880
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5312
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5449
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3969
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3573
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.