HTML and CSS

Two full-height columns

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Apr 2006

Posts: 357

Reputation: death_oclock will become famous soon enough

Solved Threads: 37

death_oclock death_oclock is offline

Offline

Posting Whiz

Two full-height columns

Mar 17th, 2009

I need to have my background image span the entire length of the page without using the BODY element, here's why: I separated the image into left and right sections so even for different resolutions, the left image will always be on the left, and same with the right. Because of this, I have to use two DIVs, each with one part of the image. The problem is, I haven't seen any way to get them to span the entire height of the page. Setting width: 100%; only sets these to 100% of the viewport. Any ideas?

Edit: here is the CSS I currently have (for those specific parts):

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
.bodyContent .bg_l
{
  position: absolute;
  z-index: -1;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 500px;
  background-image: url('http://img22.imageshack.us/img22/2778/bgl.jpg');
  background-repeat: repeat-y;
}
.bodyContent .bg_r
{
  position: absolute;
  z-index: -1;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 500px;
  background-image: url('http://img15.imageshack.us/img15/5810/bgrf.jpg');
  background-repeat: repeat-y;
}
.bodyContent .bg_l
{
  position: absolute;
  z-index: -1;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 500px;
  background-image: url('http://img22.imageshack.us/img22/2778/bgl.jpg');
  background-repeat: repeat-y;
}
.bodyContent .bg_r
{
  position: absolute;
  z-index: -1;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 500px;
  background-image: url('http://img15.imageshack.us/img15/5810/bgrf.jpg');
  background-repeat: repeat-y;
}

Edit again: I just realized that in IE (horrible thing that it is) the background won't span any of the page except for a small, ~15px part at the top. If you want to take a look at this, here is the page.

Last edited by death_oclock; Mar 17th, 2009 at 6:09 pm.

•

Join Date: Jan 2007

Posts: 3,210

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 164

MidiMagic

Offline

Nearly a Senior Poster

Re: Two full-height columns

Mar 19th, 2009

0px is an invalid style. Never attach a unit of measure to a 0 value. It invalidates the entire style.

Daylight-saving time uses more gasoline

•

Join Date: Apr 2006

Posts: 357

Reputation: death_oclock will become famous soon enough

Solved Threads: 37

death_oclock death_oclock is offline

Offline

Posting Whiz

Re: Two full-height columns

Mar 19th, 2009

Not really. Removing the "px" changes nothing. And 0px really doesn't make sense to you? How else should you remove a border inherited from lower down in the cascade?

•

Join Date: Jan 2007

Posts: 3,210

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 164

MidiMagic

Offline

Nearly a Senior Poster

Re: Two full-height columns

Mar 24th, 2009

•

Originally Posted by death_oclock

Not really. Removing the "px" changes nothing. And 0px really doesn't make sense to you? How else should you remove a border inherited from lower down in the cascade?

It's not me that does the complaining. it's the browser. Firefox will throw away any style that contains 0 with a unit of measure attached (such as 0px, 0% 0pt). You have to put just the 0, with no unit of measure:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

.mystyle [margin: 0;]

Border prefers the "none" attribute, rather than 0, if there is to be no border at all.

But margin and padding do not know the "none" attribute. You have to use 0 with them.

Last edited by MidiMagic; Mar 24th, 2009 at 7:08 pm.

Daylight-saving time uses more gasoline