Grow your CSS skills. Land your dream job.

[Solved] IE7 not making a DIV be auto / 100% width?

  • # November 2, 2010 at 4:53 pm

    Hello folks, I am wrestleing with a new CSS layout, one of my DIVs will not become 100% width, which is then causing the background-image to be truncated.

    The width of the parent DIV is flexible, so the div with the stretching background for the title also needs to stretch with it.

    It works FINE in FF, Safari, Chrome etc. but not in IE7.

    In the below link, I have marked the problematic DIV with a red outline so that you can see which element it is.

    Does anyone know the solution? I’m guessing its very simple.

    I have tried: width:100%, auto, inherit on it and parent and daughter divs/h2 and I have also tried display:block… nothing helps.

    Thanks!!!
    http://www.fountain-city.com/testing/

    Kindly,

    Sebastian.

    # November 2, 2010 at 7:17 pm

    For IE7 remove the left: 726px and margin-left: -600px in .extraRightArea.

    In some places you are using position absolute and floats. They are mutually exclusive, it’s either one or the other. You are also repeating the css for some of the divs which is probably causing conflit, in some cases you have one css declaration which says float left and further down a second one for the same tag which says float right.

    # November 2, 2010 at 7:53 pm

    Thanks, I think I kept adding things when I was trying to get it to work, and the left margin issue is something i just haven’t fixed yet for the right-column… if there are two declarations, I’m prety sure IE just uses the most recent one [like all other browsers]; in any case though, do you know what I need to make it say to get that div to actually be width 100%?? cause float left or right isn’t going to make it 100%… and that is really my only issue right now.

    # November 2, 2010 at 8:20 pm

    ok finally found the solution!! Have to add:

    overflow:auto;
    width:100%

    to the holding DIV and the DIV with the title and BINGO it works in IE7!

    yaay!

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".