White background in wrap won’t extend to bottom of page

  • Resolved Ian

    (@ianaleksander)


    14 years, 7 months ago

    I tried searching for this, but couldn’t find anything that helped me – although it’s quite possible I’m not sure what terms to search for.

    Basically, I want to add a background image to this layout:

    https://tradereadingorder.ianaleksanderadams.com

    The image adds fine (just a temp image in there while I work on background design), but the white behind content isn’t working. I used firebug and it seems that the wrap doesn’t extend all the way down, even though everything is inside that div – it gets stuck at the header. I can’t figure out why.

    I’m fairly new at this stuff and just teaching myself, but my roommate who makes websites for a living couldn’t figure it out either.

    Any ideas?

Viewing 8 replies - 1 through 8 (of 8 total)

  • The reason is because the items inside the main wrap div are floating. This is a common problem for people using CSS. When an element is floating it does not cause the height of the div it’s inside to stretch. there are two solutions I’ve found. One is to skip the CSS altogether and create a table using html to separate and display your content and sidebars. Another is to create a div to place at the bottom of both floating items and give it the property of clear both in CSS which might not always work depending on the layout.

    Another way is to create an outer div to center content and sidebars using margin auto on the left and right. Then create a div inside that with the same width and give it the property of position absolute, height auto, minimum height 100%. It’s a trick that works great for sites that use sidebars.

    In this example you can add the background color or image to either one and remove it from the div’s placed inside it.

    #outer-container {
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    }

    #inner-container {
    width: 1024px;
    min-height: 100%;
    position: absolute;
    height: auto;
    }

    Thread Starter Ian

    (@ianaleksander)

    I think it’s something to do with menu2, my right sidebar. For some reason when I take the float tag off that one the white extends to the bottom.

    Cool, you can just do that then I guess.

    Thread Starter Ian

    (@ianaleksander)

    except then that menu gets bumped to the bottom, under the other content – so it doesn’t really solve my problem. ??

    Thread Starter Ian

    (@ianaleksander)

    ooh I posted that without noticing the more advice up above. I’ll try that stuff! give me a few to see if it works.

    thanks a lot!

    Thread Starter Ian

    (@ianaleksander)

    holy crap the clear both worked! I think I broke it when I had taken the footer out of an old layout, which I then made into this one. It wasn’t three columns and had no background image so I never noticed!

    I put a little div footer at the bottom and then set the style to just have clear both in it and it solved my problem right away.

    haha this is excellent, thank you very much!

    No problem, glad it worked out for you.

    Thread Starter Ian

    (@ianaleksander)

    seriously, thanks. I should have posted on here sooner, it was driving me crazy all day.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘White background in wrap won’t extend to bottom of page’ is closed to new replies.