WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] White background in wrap won't extend to bottom of page (9 posts)

  1. Ian
    Member
    Posted 4 years 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:

    http://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?

  2. Mercer2789
    Member
    Posted 4 years ago #

    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;
    }

  3. Ian
    Member
    Posted 4 years ago #

    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.

  4. Mercer2789
    Member
    Posted 4 years ago #

    Cool, you can just do that then I guess.

  5. Ian
    Member
    Posted 4 years ago #

    except then that menu gets bumped to the bottom, under the other content - so it doesn't really solve my problem. :(

  6. Ian
    Member
    Posted 4 years ago #

    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!

  7. Ian
    Member
    Posted 4 years ago #

    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!

  8. Mercer2789
    Member
    Posted 4 years ago #

    No problem, glad it worked out for you.

  9. Ian
    Member
    Posted 4 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic