Grow your CSS skills. Land your dream job.

[SOLVED]Width:100% absolute position div except ie6

  • # June 21, 2009 at 8:40 am

    I have a layout that is 1024px except for 1 div that I would like to be 100% width of the browser window – much like the header and footer of this site. I have attached 2 images since I cant post a link – the ie6 image is what is happening that I would like some assistance remedying the other image is how it should look and does look in FF,IE7,Safari,Opera etc.

    Here is my Xhtml:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



    Here is my CSS:

    Code:
    body
    {
    font-size: 90%;
    font-family: helvetica, georgia, sans-serif;
    line-height: 1.6em;
    text-align: center;
    color: #fff;
    background-color: #686963;
    width:100%;
    margin:0;
    }

    div#container{
    width:1024px;
    margin: 0 auto;
    background-color: #fff;
    height:2000px;
    }

    div#header{
    background-image: url(../images/header-bg.jpg);
    background-repeat: repeat-x;
    width: 1024px;
    height:100px;

    }
    img.logo{
    float:left;
    margin: 5px 0 0 5px;
    }

    div#contactBox{
    float:right;
    background: url(../images/contact-drop.jpg) no-repeat;
    width:380px;
    height:50px;
    margin-right: 25px;
    }
    div#tabs{clear:both;}
    div#subnav{
    background-color: #99cc66;
    width: 1024px;
    height: 30px;
    border-bottom: 3px solid #42423f;
    }

    div#scroller{
    margin-top:20px;
    background: url(../images/sliderbg.jpg) repeat-x;
    height:250px;
    position: absolute;
    left: 0;
    right: 0;
    width:100%;
    }

    The div that I would like to expand 100% of the browser is div#scroller.

    Thanks in advance for looking – Please let me know if you need anything else.

    Thanks!

    # June 21, 2009 at 9:54 am

    Is this a spot the difference competition? ‘Cos I’m damned if I tell the two pictures apart.
    I can tell you that #scroller will only be 100% width of its parent div which is #container. If you want it to span the browser window take it out of the container div.

    # June 21, 2009 at 10:03 am

    I have tried what you mentioned prior to posting to the forum – it doesnt seem to matter if I set the parent div to 100% or to 1024px inside or outside of a parent div – ie6 returns this everytime – it seems as though the image doesn’t repeat like the other browsers.
    [attachment=1]Picture 2.png[/attachment]

    Here is all other browsers and exactly what I want to achieve.
    [attachment=0]all-others-proper-look.png[/attachment]

    Thanks for the prompt reply – I see in order to get the image to show more than the given width in the forum – you have to place it inline – thats why the two images looked the same.

    Thanks!

    # June 21, 2009 at 10:44 am

    Still not absolutely sure what your trying to do. A link would be great help.
    I repeat, anything that you want to span the entire browser window cannot be inside a 1024px div. Have you validated your markup? If what you posted is an accurate representation of your page you have an unclosed div in there.

    # June 21, 2009 at 12:47 pm

    Maybe this won’t help much, but I came to think of "declaring a width and 100%", and how that isn’t the same thing, if that could be it (sorry I’m just on my way out).
    The box-model will make a div with no width declared as 100% of the browser-window, no matter what padding (and borders? ) you have.
    However, setting it’s width @ 100% AND having padding as well, that will result in width (100%) + X amount of padding. I.e. more than 100%.

    I digress, gonna be late. Bye!

    # June 21, 2009 at 4:12 pm

    Apostrophe – So you are saying if I dont close a div wierd things can happen ? :( Thank you very much – note to self validate your code prior to taking screen shots and wasting others times with pointless posts.

    Thanks again! :lol:

    LooksLIkePat – thanks for the lesson as well – look forward to utilizing this forum more often great information from those on the board and I will try to not waste anyones time with nonsense like unclosed tags!

    thanks again.

    # June 21, 2009 at 5:15 pm
    Quote:
    Apostrophe – So you are saying if I dont close a div wierd things can happen ?

    In a nutshell, yes.
    If you have one less closing div than you have opening divs then the browser has to take a wild guess as to which closing div matches which opening div. It may be obvious to you and me but computers ain’t that smart, especially ones running ie6. :D

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

You must be logged in to reply to this topic.

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