Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 739

Mar 17th, 2009

Two full-height columns

Expand Post »

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):

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.

death_oclock

Reputation Points: 128

Solved Threads: 43

Posting Whiz

Offline

389 posts
since Apr 2006

Permalink

Mar 19th, 2009

Re: Two full-height columns

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

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Mar 19th, 2009

Re: Two full-height columns

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?

death_oclock

Reputation Points: 128

Solved Threads: 43

Posting Whiz

Offline

389 posts
since Apr 2006

Permalink

Mar 24th, 2009

Re: Two full-height columns

Click to Expand / Collapse Quote 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:

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.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: aligning 2 DIV's aside one another

Next Thread in HTML and CSS Forum Timeline: Browser issuses

DaniWeb Message

Cancel Changes

User Name
Password