Holland — Wed, 13 Jun 2007 20:55:36 +0000

Let me rephrase the question...

What the problem comes down to is the following:

I can't get #layoutInner to span the same height as #layout.

Thanks,

Paul

demonhale — Wed, 13 Jun 2007 01:47:04 +0000

can we see the live page instead?

Holland — Wed, 13 Jun 2007 00:22:38 +0000

@Vibins:

I have tried different combinations of height and min-height. The #layout div's background image works and stretches to the bottom of the window or to the bottom of the text in case there is more content. The #layoutInner div's background image (the right border) will only either stretch as far is it's content, or it will go to the bottom (if I set height to 100%), but in that case it will not stretch if the text goes beyond the bottom of the window.

The effect I am going for can be seen on blogger.com (shadows on both sides). The only difference with blogger.com is that they have a fixed width content area. My content area's width is fluid.

@WebWiz

The code I posted is a simplified version of my design, but the essentials are still there.
Thank you for referencing that link, I will try those methods. In the mean time, please keep the ideas coming.

I hope it is clear what effect I am going for, if not, let me know.

Thanks again,

Paul

webwiz — Wed, 13 Jun 2007 00:03:19 +0000

Hello Holland,

There is a variety of solutions offered for this common problem on the css-discuss Wiki[1]. The problem is that not all work in all situations, so you may have to try 2 - 3 before you "buy".

For example, your previous respondent suggests the "large padding, huge negative margin" solution. While some report success with this method, personally I have never got it to work cross-browser. But that may be my fault, not the fault of the method.

I see you are using a background image. If that is for the "faux columns" method, I see it used successfully on lots of sites. Check the Wiki for clues as to why it does not work for you.

If all else fails, don't hesitate to put up your attempt somewhere where we can take a look at. Having an actual page to debug is usually a lot easier than guessing.

[1] css-discuss.incutio.com/?page=AnyColumnLongest

Cordially, David
(wondering if my sig will show up)
--

vibins — Tue, 12 Jun 2007 22:13:47 +0000

Try using height insted of min height.

 #layout
      {
        overflow: hidden;
        width: 85%;
        margin: 0 auto;
        background: #FFFFFF url(http://mtlweb.mit.edu/img/bg_01.gif) top left repeat-y;
      }

      #layoutInner
      {
       padding-bottom: 20000px;  
       margin-bottom: -20000px;
        width: 100%;
        background: url(http://mtlweb.mit.edu/img/bg_01.gif) top right repeat-y;
      }

hope it helps