treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Divs are out of alignment in IE

  • i just had this issue brought to my attention, but when anybody tries to view my site from IE (tested in IE6, IE7 and IE8 on windows XP, Vista, and windows 7), the Content Div, and the nav div are for the lack of a better description, one on top of each other, when they should be side by side

    my site: http://www.nitemare.ca

    the html code in question:
    <div id=\"main\" style=\"padding: 0 0 40px 0;\" class=\"container\"><img src=\"./images/dead.gif\" alt=\"spacefiller\">
    <div id=\"nav\" class=\"container\"><? //PHP code for nav bar ?></div>
    <div id=\"content\" class=\"container\"><? //PHP code for Main content ?></div>
    </div>


    CSS code can be found at this link: http://www.nitemare.ca/styles/main.css


    thanks for the help

    **PS. btw, for best viewing of what the site should look like, use Google chrome or firefox, i haven't seen any problems with them
  • I would bet that if you increase your content areas width by a few pixels, that will fix the problem. I have only seen this in internet explorer when you set a width of say 700px and the content comes out to 701 or 702. internet explorer likes to add margins and padding onto things. So try making the width bigger or try an overflow: hidden;
  • If you set the main div width to 901 it fixes the problem in my tests :)
  • ok, i see whats going on, its damn IE,

    ive tried using the good old conditional elements:
    <!--[if IE]>//stuff<![endif]-->


    but this would only add a second css document, since you can't put an else statement in there, is there any easy way i can have it load one css document if IE, and another if its any other browser, but not both css files? or is this going to have to be done through php/jscript for browser identification?
  • Why is it such a big deal to have a second stylesheet?

    If you really don't want to do that then just add your ie rules to the document head inside a conditional statement.
  • because the solution to this problem is not adding ccs statements, its modifying existing ones, so if i just add the IE specific ones to the conditional statement, then the original css will take priority
  • because the solution to this problem is not adding ccs statements, its modifying existing ones, so if i just add the IE specific ones to the conditional statement, then the original css will take priority

    Not if the ie ones come first.