Hello,

I have been working on this CSS school project and am almost completed! Only thing is that I can't get the background image to extend to the Full Height of my page. Arghhhh frustrating. I'm a novice CSS person and have perused the Web and have not found what it is that I am doing wrong.

Here is what I have in my CSS info.

#right {
    background-image: url("images/rbkgrnd.gif");
    margin-left:210px;
    margin:0px;
    padding:6px;
}

Here is the Link if you'd like to see what I have so far.

http://nlecommerce1.dcccd.edu/studen...ign2/project3/

Any help would be Greatly Appreciated.

I'm sure it's just something I have overlooked or just don't know what it is I am doing or enough to know what to look for.

Thanks,
Rich

This is a case where absolute positioning would be better.

You have the following on the left column:

#left {
  background: url(images/lcol2.png) repeat-y 50% 0;
  float:left;
  top: 2px;
  left: 0px; /* This doesn't do anything? *?
  width: 20%;
}

A float isn't going to do what you want.

Instead try positioning:

#left {
    position: absolute;
    background: url(images/lcol2.png) repeat-y 50% 0;
    top: 0;
    bottom: 0;
    left: 0;
    margin: 0 0 0 20px;
    width: 20%;
}

That'll stretch that left div from the top to the bottom of the viewport.

Next, you'll want to wrap all of your content.

<div id='body'>
    <div id='left'>

    </div>
    <div id='content'>

    </div>
    <div id='right'>

    </div>
</div>

Ok, the middle "content" div is what will contain your content. You shouldn't position this one. Let that one grow and shrink dynamically. On the body div, you'll want to apply a minimum height, so that it won't shrink below a certain threshold and completely botch your design. Do this with the min-height property.

On the content div, you'll also want to apply left and right margins equal to the width of the left and right columns. That should be straight forward.

Finally, now to make it all work in Explorer, add a new style sheet contained inside of conditional comments.

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="/styles/ie.css" />
<![endif]-->

This style sheet is only included in Internet Explorer 6 and less, do this because we have no idea what Explorer 7 might have in the way of CSS features, so we'll assume that it will be more standards compliant than Explorer 6 (a lofty assumption).

Then in this IE-only style sheet we'll employ a few hacks.

On the content div, since IE doesn't understand the min-height property, you'll apply a height property. Use height because IE treats the height property like the min-height property.

Then, IE also doesn't understand top: 0; bottom: 0; to imply height. So you'll use a proprietary IE feature to get around this.

height: expression(document.getElementById('body').offsetH eight);

That tells it to match the height of the "body" <div> element. You can fine tune that if necessary, such as subtract one or two pixels or add pixels. You also don't have to bother with appending a unit, if you don't want to, because Explorer incorrectly treats unit-less measurements as pixels.

Unfortunately, however, this hack will fail if JavaScript is disabled.

HTH!



Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design