Side by Side DIVs in IE7 and IE6?

**ne_plus** · 07-23-2011 03:56 PM

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>

**Cory R** · 07-23-2011 04:30 PM

Have you tried adding a float of 'left' to the first block only?

**ne_plus** · 07-23-2011 04:33 PM

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>

**ne_plus** · 07-23-2011 04:37 PM

Originally Posted by Cory R

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

**Cory R** · 07-23-2011 04:47 PM

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.

**ne_plus** · 07-23-2011 04:53 PM

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

**Cory R** · 07-23-2011 05:43 PM

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.

**ne_plus** · 07-23-2011 05:53 PM

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?

**Cory R** · 07-23-2011 05:59 PM

I might be able to figure it out with a link to your site.

**Frank62** · 07-24-2011 03:38 AM

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>

**OctoberWind** · 07-24-2011 04:24 PM

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.

**Cory R** · 07-24-2011 07:17 PM

We figured it out via PM, it was a IE double-margin issue. display: inline; on one of the DIVs fixed it.

**sebeticus** · 05-14-2012 08:33 PM

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: Side by Side DIVs in IE7 and IE6?

Thread Tools

Display

Side by Side DIVs in IE7 and IE6?

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions