Background stopping short – why?

  • Resolved mandawahoo

    (@mandawahoo)


    17 years ago

    I have added a second footer to my current wordpress theme
    http://www.gibsondesignmanagement.com/test/

    In my footer file, I have div “#footertop” containing 3 “.footerbox” spans

    </div>

    <div id=”footertop”>
    <div id=”footer-wrap”>

    <span class=”footerbox” style=”margin-right:10px;”>test

    test</span>
    <span class=”footerbox” style=”margin-right:10px;”>test

    test</span>
    <span class=”footerbox”><?php quotescollection_display_randomquote(); ?></span>

    </div>
    </div>

    The style sheet calls out:

    #footertop {
    text-align: center;
    border-top: none;
    clear: both;
    padding: 15px;
    text-align: center;
    background: url(images/back.jpg);
    color: #FFF;
    }
    .footerbox {
    padding:5px;
    width: 300px;
    background: #A29982;
    float: left;
    color: #4d4236;
    }

    Why is the background stopping so short?
    Any advice will be appreciated. I actually had it working earlier, so I’m not sure why its giving me trouble now.

Viewing 11 replies - 1 through 11 (of 11 total)
  • stvwlf

    (@stvwlf)

    17 years ago

    Hi

    I have been playing with your layout. I assume you want the tan color of the sidebar to be the background of the contents area also?

    I suggest you add a wrapper Div around both your content and sidebar div’s

    <div id=”contentwrap”>
    <div id=”content”>
    ………
    </div>
    <div id = “sidebar”>
    ….
    </div>
    </div>

    Apply the background color to the contentwrap div

    You should also float the contentwrap div left.

    Try that – I think it will get you most of the way to where you want to go.

    Thread Starter mandawahoo

    (@mandawahoo)

    17 years ago

    No, sorry, what I want is for the pattern (the block background) to extend down to the second footer.

    Thanks though.

    stvwlf

    (@stvwlf)

    17 years ago

    Hi

    All you need is to delete clear: both from #footertop (in the CSS)
    and replace it with float: left

    You will need to tweak padding and margin a bit.

    Thread Starter mandawahoo

    (@mandawahoo)

    17 years ago

    That definitely gets the background extending down; however, the problem with playing with the padding and margin values is that it is a centered theme. Even if I set the margin so that it works on my screen, it will not fit perfectly on someone’s screen that might be set at a different resolution.

    Any suggestions?

    stvwlf

    (@stvwlf)

    17 years ago

    Add to #footertop

    margin: 0 auto;
    width: 100%

    see if that gives the effect you want

    t31os

    (@t31os)

    17 years ago

    You’ll need to remove the padding on #footertop and set width of #footer-wrap to auto, then apply a margin to the spans to create the padding that was removed…

    Like this… modify what you have to include the below..

    #footertop {padding:0;width:100%;}
#footertop #footer-wrap  {width:auto;margin:0 10px}

    NOTE: margin:0 auto on a 100% element won’t do anything, but i did try it … 😉

    If you set the footertop element to 100% width with padding you’ll end with scrollbars, so just use margin on the footer-wrap instead…

    At least that worked on the page for me…. adjust what you have as needed.

    Thread Starter mandawahoo

    (@mandawahoo)

    17 years ago

    I tried your suggestions and it still looks the same…

    I tried

    #footertop {
    text-align: center;
    background: url(images/back.jpg);
    color: #FFF;
    padding:0;
    width:100%;
    clear: both;
    }
    #footertop footer-wrap {
    width:auto;
    margin:0 10px;
    padding:15px 0 15px 0;
    }

    Thread Starter mandawahoo

    (@mandawahoo)

    17 years ago

    oops, #footer-wrap I mean. still didn’t work

    t31os

    (@t31os)

    17 years ago

    You missed the hash #

    #footertop footer-wrap {
    …should be..
    #footertop #footer-wrap {

    Thread Starter mandawahoo

    (@mandawahoo)

    17 years ago

    See above. I caught that mistake… still isn’t working

    Thread Starter mandawahoo

    (@mandawahoo)

    17 years ago

    Okay, I fixed it with display: inline-block, and then used various fixes for earlier browser versions.

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

The topic ‘Background stopping short – why?’ is closed to new replies.