Grow your CSS skills. Land your dream job.

[Solved] IE7 Layout – Sidebar Floats Too Far Right

  • # November 15, 2009 at 9:35 pm

    Hi there folks, I’m building a site and it everything is looking pretty good in FF Chrome etc.

    Live link : http://bepeace.org/test/index.html

    IE 7 is giving me two issues:
    1. Sidebar is floating way out to the right creating a horizontal scroll. not sure why its not respecting the width of the page-wrap that it is included in
    2. Footer lifts up off the page This is surely because of the negative positioning i used on the footer navigation. to clarify:
    i have a footer div with width set to 100% to get a solid background color, then i placed a div over that with my gradient background image. Then i used negative relative positiong to bring the footer-nav up over the background image.

    Any help will be much appreciated as usual.
    Cheers

    # November 16, 2009 at 2:44 am

    Hi, first a fix, then some notes.

    1) Change you #sidebar to be "margin:0" and add "right:0;"
    2) Delete the #footer-burst element and add the background image straight to the Footer div:
    background: #9B9F9F url(burst.png) no-repeat 420px 0;
    You’ll also need to fiddle with some other footer elements to get them back in the box.

    Let’s look at this real quick:

    Code:
    #sidebar {
    float:right;
    margin:0 0 0 650px;
    padding:0;
    position:absolute;
    top:235px;
    width:260px;
    }

    The main note is that Float:right won’t affect a position:absolute (or relative).
    If you are using position: absolute, USE IT to position the element. Use Left, right, top, and bottom; Don’t use margin, padding or float.

    Hope that helps.

    # November 26, 2009 at 1:58 am

    I never thanked you for your reply. Much appreciated!

    # November 26, 2009 at 3:09 am

    Haha. You’re welcome. Glad it worked. [img]http://www.websitesinaflash.com/images/thumbsup.gif[/img]

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".