CSS 100% height problem

Holland posted this at 21:04 — 12th June 2007.

They have: 3 posts

Joined: Jun 2007

Hi all,

I've been working on a new design for a couple of days now. I've worked out all the problems sofar, but there is one hurdle I can't seem to pass.
I'm interested in getting it to work primarily for FF and IE. I've been testing this in FF 1.5.0.12.
The idea is to get a border on both sides that stretches all the way down to the bottom (100% height) of the page when there is not enough text to fill the page. When the text forces a scrollbar to appear I want the borders to stretch as far as the text. I thought min-height would be my fix, and it does the job, but only for the left side. I can't get the right side to stretch. One thing adds complexity: the content area's width needs to be fluid.

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Test Design</title>
    <style type="text/css">
    <!--

      html
      {
        height: 100%;
      }

      body
      {
        height: 100%;
        margin: 0;
        padding: 0;
      }

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

      #layoutInner
      {
        min-height: 100%;
        width: 100%;
        background: url(http://mtlweb.mit.edu/img/bg_01.gif) top right repeat-y;
      }

      #content
      {
        padding: 0 60px;
        min-height: 100%;
        height: 100%;
      }

    -->
    </style>
  </head>
  <body>
    <div id="layout">
      <div id="layoutInner">
        <div id="content">text</div>
      </div>
    </div>
  </body>
</html>

Thanks,

Holland

baldrick posted this at 22:13 — 12th June 2007.

He has: 388 posts

Joined: Apr 2005

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

webwiz posted this at 00:03 — 13th June 2007.

He has: 629 posts

Joined: May 2007

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

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

Holland posted this at 00:22 — 13th June 2007.

They have: 3 posts

Joined: Jun 2007

@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

demonhale posted this at 01:47 — 13th June 2007.

He has: 3,278 posts

Joined: May 2005

can we see the live page instead?

Holland posted this at 20:55 — 13th June 2007.

They have: 3 posts

Joined: Jun 2007

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