Problem with wrapper div height

  • Hi,
    I am having trouble with the #wrapper height in a template I am building.
    This is the structure of my webpage:

    <start wrapper>
    <start/end header>
    <start/end C1>
    <start/end C2>
    <start/end sidebar>
    <end wrapper>

    CSS:
    html, body {
    height: 100%;
    background-image:url (THEURL);
    }
    #wrapper {
    width: 46.875em;
    height: 100%;
    margin: auto;
    background: #ffffff;
    }

    Essentially the wrapper is supposed to provide a white background so the content in the various columns is readable since the background-image is a different color. The current setting: wrapper-height: 100% shows the white background stretching only to bottom of the loaded page, but nothing below as you scoll down further.

    The reason I am posting this on the WP forums is because I have an inkling that the css reads 100% height for the body and wrapper as 100% of the page, but it cannot foresee what’s inside the php lines of the loop. Meaning it cannot see how long or short the content is. And hence parses 100% of only the browser window without scroll.
    I am sure a problem like this must have a solution. I just can’t find it online. And BTW, I really prefer to not use a fixed height for obvious reasons.

Viewing 15 replies - 1 through 15 (of 17 total)
  • Thread Starter greenmango112

    (@greenmango112)

    also I just noticed that the wrapper background is not even covering the whole footer, which is a child of wrapper. So now things make even lesser sense to me!

    any help would be appreciated

    Thread Starter greenmango112

    (@greenmango112)

    uh….anyone?

    We’ll need a link your site to figure out the problem.

    Thread Starter greenmango112

    (@greenmango112)

    thanks for your reply.

    you can visit the site at https://www.sposa.com/wordpress/

    You can see what the problem is if you scroll down.

    Thread Starter greenmango112

    (@greenmango112)

    any ideas?

    First, your site does not validate see 210 errors listed with 6 warnings.

    Opened in my copy of IE6 – When your site first loads, I could see some red and green background over the blue and white background, then this message appears “Internet Explorer cannot open Internet site https://www.sposa.com/wordpress/&#8230; Operation Aborted”
    Then the screen goes to Cannot find server ……

    Finally,<meta name=”generator” content=”Bluefish 1.0.7″/> in source.

    Thread Starter greenmango112

    (@greenmango112)

    hey mercime,
    I’m going to checkout the validation errors…that just might tell me what I’m missing thanks. Though since the template is repeated, I hope that the number of errors per page are much lower, though still surprising.

    BTW, you probably saw the differently-colored backgrounds while I was working on them, I often do that just to give me ideas of where various columns etc are positioned.

    And yeah, I use bluefish (an editor) from Ubuntu. I’m quite certain that’s not an error, lol.

    Thanks for your response!

    If anyone else knows anything more specific to the problem, I’d really appreciate your help.

    Thread Starter greenmango112

    (@greenmango112)

    hmm I had a look at all the errors and warnings, and none of them are critical in any sense. They do not explain this wrapping problem as I had hoped. But anyway, they do need to be address for cross-browser compatibility and I will get to that very soon.

    Thread Starter greenmango112

    (@greenmango112)

    out of curiosity, does my belief that this happens because the height:100% cannot pre-parse the wp content make sense?

    hmm I had a look at all the errors and warnings, and none of them are critical in any sense.

    LOL. Unclosed div tags and no </body> or </html> tags… If these aren’t critical code errors, what are?

    Try: Add before closing div of wrapper

    <div style="clear:both;"></div>

    Thread Starter greenmango112

    (@greenmango112)

    Doesn’t seem to do the trick. I tried it in a number of places.

    Anyway should I use height:100% for body and wrapper should I use auto?

    Thread Starter greenmango112

    (@greenmango112)

    yeah, for some reason auto cuts the wrapper bg to a mere few pixels long. But all of it’s other properties are being applied to the rest of the content, so why not the bg?

    Thread Starter greenmango112

    (@greenmango112)

    the problem still exists…any new thoughts on it?

    From what I can see, you’re up to 408 validation errors now. Maybe some of those are more critical than you think?

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Problem with wrapper div height’ is closed to new replies.