www.webdeveloper.com
Results 1 to 13 of 13

Thread: Side by Side DIVs in IE7 and IE6?

  1. #1
    Join Date
    Jan 2010
    Posts
    43

    Side by Side DIVs in IE7 and IE6?

    I have the following Div's aligned as show below, which works in IE8 -- but when viewed in IE7/IE6 the two divs are on top of each other and won't align side by side?

    I tried display: inline; but this caused the div to move to the far left of the page? Any suggestions...? IE is a nightmare...

    The CSS is:

    #adzone {
    width: 960px;
    margin: 14px auto 0 auto;
    clear: both;
    }

    Code:
    <div id="adzone">
    <div style="float:left;"><script type="text/javascript" src="http://domain.com/wp-content/plugins/oiopub-direct/js.php?type=banner&align=center&zone=3"></script></div>
    
    <div style="float:right;"><script type="text/javascript" src="http://domain.com/wp-content/plugins/oiopub-direct/js.php?type=banner&align=center&zone=1"></script></div>
    
    <div class="clear"></div>
    </div>

  2. #2
    Join Date
    Jul 2006
    Posts
    207
    Have you tried adding a float of 'left' to the first block only?

  3. #3
    Join Date
    Jan 2010
    Posts
    43
    Hi Cory,

    Are you suggesting to remove the float right from the second block so it doesn't automatically show below the first? For example:

    Code:
    <div id="adzone">
    <div style="float:left;"><script type="text/javascript" src="http://domain.com/wp-content/plugins/oiopub-direct/js.php?type=banner&align=center&zone=3"></script></div>
    
    <div><script type="text/javascript" src="http://domain.com/wp-content/plugins/oiopub-direct/js.php?type=banner&align=center&zone=1"></script></div>
    
    <div class="clear"></div>
    </div>

  4. #4
    Join Date
    Jan 2010
    Posts
    43
    Quote Originally Posted by Cory R View Post
    Have you tried adding a float of 'left' to the first block only?
    If you remove the float right from the second div inside of the main container div it messes up in IE8.

    I think both divs have to float left and right respectively in all other browsers. But IE6 and IE7 are showing the divs on top of each other instead of side by side...

  5. #5
    Join Date
    Jul 2006
    Posts
    207
    That's odd, float: left; on the first DIV worked for me in IE9 compatibility mode; granted, the script content didn't appear for me, I tested it by applying a width, height and background color to both DIVs. I think applying float: left; to both DIVs will give a better result. If it differs in certain versions of IE, you can use conditional comments to apply separate CSS to a specific IE version.

  6. #6
    Join Date
    Jan 2010
    Posts
    43
    The "side by side" for two div's -- using float left and float right -- works in IE8 and IE9. But the issue is with IE6 and IE7.

    The float left and right doesn't work for earlier IE versions. It displays the two divs, one on top of another instead...

    I am trying to find out how to solve this styling issue for IE6 and IE7...

  7. #7
    Join Date
    Jul 2006
    Posts
    207
    What happens when you float both of them left? That works for me in IE6 and 7. I wouldn't be too worried about IE6, even major networks have dropped support for it because it was poorly executed and now too old to worry about. It's possible the script content is causing it not to be inline somehow.

  8. #8
    Join Date
    Jan 2010
    Posts
    43
    Floating both divs left doesn't impact the viewability issue in IE6 or IE7. Thanks though.

    Hopefully someone knows and can share the best fix for side by side divs showing up on top of each other in IE6/7?

  9. #9
    Join Date
    Jul 2006
    Posts
    207
    I might be able to figure it out with a link to your site.

  10. #10
    Join Date
    Feb 2008
    Location
    Europe
    Posts
    266
    Seemingly, the scripts are to blame. Because this works in IE6-8 and very probably 9 as well:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #container { 
    	width: 960px;
    	margin: auto;
    	}
    #leftDiv, #rightDiv { 
    	float: left;
    	width: 480px;
    	height: 500px; 
    	}
    #leftDiv { 
    	background: yellow;
    	}
    #rightDiv { 
    	background: red;
    	}
    </style>
    </head>
    <body>
    <div id="container">
      <div id="leftDiv"></div>
      <div id="rightDiv"></div>
    </div>
    </body>
    </html>
    R.,
    Frank

    Please report back how suggestions worked out.

  11. #11
    Join Date
    Jul 2007
    Location
    Wisconsin
    Posts
    468
    Similar to what Frank62 might (vaguely) be suggesting, have you tried defining a height and width for the divs? Not knowing what's in the scripts (I would guess they are banner ads of some sort), they also might be throwing something else into the works that we can't account for.

    Also, at this point in time, don't even waste your time with IE6. It's 10 years, and three (almost 4) versions old. Anyone still using it deserves every broken page and malicious security exploit they come across, if only for their own sheer ignorance. If you have a way to gracefully tell them to "F off" in the process, then all the better. I can still understand the need to "re-develop" for IE7.

  12. #12
    Join Date
    Jul 2006
    Posts
    207
    We figured it out via PM, it was a IE double-margin issue. display: inline; on one of the DIVs fixed it.

  13. #13
    Join Date
    May 2012
    Posts
    1
    Frank62's solution worked for us. This is the only solution that we could find that worked equally well in modern browsers like IE8+, Chrome, and old P.O.S. browsers like IE6 and IE7.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles