How does IE deal with floats differently?

**limepickle** · Aug 30, 2007 02:40

Heres my page:

The main content is wrapped in a div called "content" and within that are 2 divs called "col-1" and "col-2"

I float "col-1" left and give it a width of 60%, and give col-2 a margin of 60% and a width of 40%. All standard stuff I thought.

Why then, does it look fine in FF but col-2 spills over in IE? As far as I know 60+40 = 100, so it should fit.

Is it something to do with the box-model and borders? Any pointers would be very much appreciated.

**james_littler** · Aug 30, 2007 02:49

total width = the width of the element + borders + padding, so try removing padding accross all elements

put this at the top of your css
*{padding: 0}

this might help it keep within the 100%

**all4nerds** · Aug 30, 2007 03:03

Hello

a float above the content is not cleared ?

40% of 760 - 20 = ? 296 not 283 ?

the content box suffers from haslayout

I hope i did not overlooked a value

**limepickle** · Aug 30, 2007 03:25

Ok, thanks guys:

*{padding: 0}

Thats already set in my CSS

a float above the content is not cleared ?

I'm using the 'clearfix' class

the content box suffers from haslayout

I'd best google that!

**all4nerds** · Aug 30, 2007 04:24

Hello

crash repair CSS

Code:

#col-1{float:left;width:60&#37;;margin-right:10px;}
head+body #col-2 {overflow:hidden;} /* always fits the non float */
* html #col-2 {float:left;} /* floats the column for IE  < 7 */
* html movie{height:1%;} /* widens the float */


#container #content {
min-height:1%;clear:both; /* haslayout and clears */
	padding-right: 10px;
	padding-left: 10px;
}

crash repair HTML your width's don't add up 760 - 20 -10 - 2x5px + 2x 1px movie -60% = 298 ? 12px short ?

Code:

<script type="text/javascript">
AC_AX_RunContent( 'width','100%','height','232','src','http://www.youtube.com/v/HCj-maNZ25I','type','application/x-shockwave-flash','wmode','transparent','movie','http://www.youtube.com/v/HCj-maNZ25I' ); //end AC code
</script><noscript><object width="100%" height="">
		  <param name="movie" value="http://www.youtube.com/v/HCj-maNZ25I"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/HCj-maNZ25I" type="application/x-shockwave-flash" wmode="transparent" width="263" height="232"></embed></object></noscript>
		  </div>

or let one thing control all width's, the content of the right box , and let the left box adjust to that

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="DESCRIPTION" content="Cell phone rental and satellite phone rental.">
<meta name="KEYWORDS" content="cell phone rental, satellite phone rental, international cell phones, cell phone, cellular phone, cell phone rental, international phone, european cell phone, japanese cell phone, worldphone, wireless, satellite phone, gsm phone, nokia cell phone, cellular services, satellite communications, phone rental, US cell phones, cell phone rental, cellular phone rental, international phone purchase, global phone rental, worldwide phone rental, rent a cell phone, international cellular phone rental, satellite phone, european cellular phone rental, gsm phone">
<meta NAME="revisit-after" CONTENT="15 days">
<meta NAME="ROBOTS" CONTENT="ALL">
<meta NAME="robots" CONTENT="index,follow">
<META NAME="ROBOTS" CONTENT="NOYDIR,NOODP">
<META name="verify-v1" content="jeQlRiKBek8/hWM6SHjQcvbfK2zeQRTXghYUjqp1loI=" />
<title>Mobal World Phone - America&acute;s #1 Selling World Phone!</title>
	<style type="text/css">
	/* CSS Document */

* {
	margin:0;
	padding: 0;
}

body {
    /*font-size: normal;*/
	font-family:Arial, Helvetica, sans-serif;
}
* html body {
    /*font-size: small; /* for IE5 Win */
    /*font-size: normal; /* for other IE versions */
}
html>body {
    /*font-size: normal; /* be nice to opera */
}

p, li { font-size: 70%; padding: 0; }

h1, h2, h4 { 	font-family:Verdana, Arial, Helvetica, sans-serif;padding: .5em 0 .2em 0; }
h1 { font-size: 128%;color: #0099FF;padding :.5em 0 .2em 0;}
h2 { font-size: 128%; }

h4 {
	font-size: 80%;
}
ul, dl {
	/*font-size: 100%;*/
}
ul li {
	font-size: 70%;
	line-height:1.1em;
}
img { border: 0; }

/* -------------------- Global Rules END ------------------*/



#rubberstamp {
	width: 181px;
	height: 53px;
	position: relative;
	font-size: 50%;
	}
#main {
	display: block;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 40px;
	height:30px;
}
#main li {
	display: block;
	float: left;
}
#container {
	width: 760px;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-color: #ECFFFF;
	border: 1px solid #999999;
	padding-bottom: 10px;
	padding-top: 10px;
}
#header #logo {
	width: 230px;
	float: left;
	padding-left: 5px;
}
#header #nav-holder {
	margin-left: 230px;
}
#container #header {
}

#main a {
	padding-left: .8em;
	color: #999999;

}

#main a:hover {
	text-decoration:none;
	color:#0099FF;
}





#rubberstamp span {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(../images/mikeyhome/usa-rubber-stamp.gif);
	background-repeat: no-repeat;
	}

/* clear fix, add this class to any element enclosing a float, in order to enclose the float correctly.(http://www.positioniseverything.net/easyclearing.html)*/
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {/*display: inline-block;*/}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
#strapline p {
	font-size: 70%;
	margin-left: 20px;
	color: #666666;

}
#col-2{float:right;margin-left:10px;display:inline;}
head+body #col-1{overflow:hidden;}
* html #col-1{float:right;display:inline;}
* html h1{height:1%;}

#container #content {
min-height:1%;
clear:both;
margin-right: 10px;
margin-left: 10px;
}
* html #container #content{height:1%;}

.moneyback {
	text-align: center;
	font-style: oblique;
	margin-top: 10px;
	font-size: 90%;
	display: block;
	margin-bottom: 10px;
}
#discover-more {
	background-image:url(../images/mikeyhome/mikey-home-discover-more.jpg);
	display:block;
	height:129px;
	width:223px;
	text-align:center;
	color:#4AA351;
	font-size:1px;
	margin-left:35px;
	margin-top: 10px;
}
#col-1 img {
	border: 1px solid #C0C0C0;
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
}
#col-1 ul {
	list-style-image: url(../images/mikeyhome/list-tick.gif);
	list-style-position: inside;
}
#col-1 p {
	margin-bottom: 10px;
}
#col-1 h5 {
	margin-bottom: 10px;
}
#col-2 #movie {
	padding: 5px;
	border: 1px solid #CCCCCC;
	background-color: #FFFFFF;
}
#player {
	text-align: center;
}
#movie #text {
	padding-left: 20px;
}
#movie #text p {
	margin: 0px;
}

#movie #text h5 {
	margin-top:10px;
	margin-bottom:10px;
}
#col-2 #button-holder {margin:0 auto;}

#footer #hackersafe {
	width: 150px;
	float: left;
	text-align: left;
}
#footer-navholder {
	margin-left: 150px;
	text-align: center;
}
#footer-nav1 ul, #footer-nav2 ul {
	display: block;
}
#footer-nav1 li, #footer-nav2 li {
	display: inline;
}
#footer-nav1 {
	margin-bottom: 5px;
}
#footer-nav2 {
}
#footer-nav1 a, #footer-nav2 a {
	margin-left: 1em;
	color: #999999;
}

#footer-nav1 a:hover, #footer-nav2 a:hover {
	text-decoration:none;
	color:#0099FF;
}


#container #footer {clear:both;
	padding-top: 10px;
}
#footer-navholder p {
	margin-top: 3px;
}
#container #footer #hackersafe img {
	border: 1px solid #999999;
	padding: 3px;
	background-color: #FFFFFF;
	margin-left: 10px;
}
#container #content #col-1 a:hover, #movie #text a:hover {
	color:#009933;
	text-decoration:none;
}

	</style>

<script src="Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<SCRIPT language="javascript" type="text/javascript">
try{WCWAudit()}catch(ex){}</script>

<!-- GWO -->

<script>
function utmx_section(){}
(function(){var k='2056063782',d=document,l=d.location,c=d.cookie;function f(n){
if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.indexOf(';',i);return c.substring(i+n.
length+1,j<0?c.length:j)}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash,
t=h.length>1||!xx||!xx.indexOf(k+':bypasscache');d.write('<sc'+'ript src="'+
'http'+(l.protocol=='https:'?'s://ssl':'://www')+'.google-analytics.com'
+'/siteopt.js?utmxkey='+k+'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+(t?'&utmxtime='
+new Date().valueOf():'')+(h?'&utmxhash='+h.substr(1):'')+
'" type="text/javascript" charset="utf-8"></sc'+'ript>')})();
</script>

<!-- GWO -->

</head>

<body><!-- GWO A/B Code -->

<!-- Insert the following right after the opening body tag in your document -->
<script>utmx_section("Test URL")</script><script>test_url = "http://change/ME.html" // Change me in the variation editor to your A/B/C test URLs</script></noscript>

<script>
// Redirect the user to the experiment page if user isn't in this combination.
if (test_url != "http://change/ME.html") { 
  document.location = test_url; 

  // Write out a noscript tag so the rest of this page is ignored.
  document.write('<sc'+'ript>document.write\(\'<no\' + \'script>\'\)</sc' + 'ript>');
}
</script>

<!-- GWO A/B Code -->
<!-- ClickTale Top part -->
<!-- ClickTale end of Top part -->
<div id="container">
	<div id="header" class="clearfix">
		<div id="logo">
		<img src="images/mikeyhome/logo_header-blue.gif" alt="Mobal Logo" width="228" height="38" />
		
		<h3 id="rubberstamp" title="America&acute;s #1 Selling World Phone!"><span></span>America's #1 Selling World Phone!</h3>
   	  </div>
		<div id="nav-holder">
		<ul id="main" class="clearfix">
			<li><a href="index.html" title="Home">Home</a></li>
			<li><a href="about_mobal.html" title="About Us">About Us</a></li>
			<li><a href="contact_mobal.html" title="Contact Us">Contact Us</a></li>
			<li><a href="support.html" title="Support &amp; FAQ">Support &amp; FAQ</a></li>
			<li><a href="products.html" title="Products &amp; Services">Products &amp; Services</a></li>
			<li><a href="news/index.html" title="News">News</a></li>
			<li><a href="site_map.html" title="Site Map">Site Map</a></li>
		</ul>
		
		<div id="strapline">		
		<p>International cell phones and satellite phones, provided by Mobal — Home of the $49 World Phone</p>
		</div>
	    </div>
		
	</div>
	
	<div id="content">
	
			<div id="col-2">
			<div id="movie">
			
			<div id="player">
			<script type="text/javascript">
AC_AX_RunContent( 'width','283','height','232','src','http://www.youtube.com/v/HCj-maNZ25I','type','application/x-shockwave-flash','wmode','transparent','movie','http://www.youtube.com/v/HCj-maNZ25I' ); //end AC code
</script><noscript><object width="283" height="232">
		  <param name="movie" value="http://www.youtube.com/v/HCj-maNZ25I"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/HCj-maNZ25I" type="application/x-shockwave-flash" wmode="transparent" width="283" height="232"></embed></object></noscript>
		  </div>
		  
		  <div id="text">
			  <p>Click the screen to watch Talkin&acute; Travel&acute;s review</p>
			  <h5>Recommended By:</h5>
			  <p><img src="images/mikeyhome/small-time.gif" alt="Recommended by Time" width="117" height="35" /></p>
			  <p><img src="images/mikeyhome/small-wsj.gif" alt="Recommended by The Wall Street Journal" width="216" height="35" /></p>
			  <p><img src="images/mikeyhome/small-washingtonpost.gif" alt="Recommended by The Washington Post" width="135" height="35" /></p>
			<p><a href="gsm/handsets.html#reviews" title="Click here to read all our rave reviews" target="_blank">Click here to read all our rave reviews</a></p>
			</div>
			
			</div>
			<p id="button-holder"><a id="discover-more" href="gsm/handsets.html" title="Discover more about the US #1 Selling World Phone">US #1 Selling World Phone >>Discover More</a></p>

		</div>
	
	
		<div id="col-1">
			<h1>Get Unbeatable <em>Global Coverage</em> And <em>Call Quality</em> With The Mobal World Phone</h1>
			
		  <h2>— America’s #1 Selling International Cell Phone Service
		  <span class="moneyback">Or Your Money Back!</span></h2>
		  <a href="gsm/buy9bc7.html?p=C118" title="Mobal $49 World Phone with FREE Travel Adapters"><img src="images/mikeyhome/c118-order-now.jpg" alt="Mobal $49 World Phone with FREE Travel Adapters" width="205" height="290" border="0" /></a>
		  <h4>Cheaper than cell phone rental - own an international cell phone for $49!</h4>
		<p>High convenience with low commitment—the <a href="gsm/handsets.html" title="See the benefits of the Mobal World Phone">$49 GSM World Phone</a> with no monthly fees. Have your own <a href="gsm/handsets.html" title="Own a Mobal World Phone - Only $49">international cell phone</a> and only pay for calls.</p>
		<h5>Would you like these great benefits?</h5>
		  <ul>
			<li>Buy for only $49 — cheaper than cell phone rental</li>
			<li>No monthly or annual fees</li>
			<li>Absolutely no additional charges or hidden fees </li>
			<li>Works in over 150 countries (see coverage &amp; call rates)</li>
			<li>Same number every time you travel</li>  
		  </ul><!--  -->
		</div>
</div>		
	
	
	
	<div id="footer">
	<div id="hackersafe">
	<!-- START SCANALERT CODE -->
			  <a target="_blank" href="https://www.scanalert.com/RatingVerify?ref=www.mobalrental.com"><img width="94" height="54" border="0" src="../images.scanalert.com/meter/www.mobalrental.com/13.gif" alt="HACKER SAFE certified sites prevent over 99.9% of hacker crime."></a>
	<!-- END SCANALERT CODE -->
	</div>
	<div id="footer-navholder">
	<div id="footer-nav1">
	<ul>
	  <li><a href="testimonials.html" title="See what people say about Mobal!">Testimonials</a></li>
	  <li><a href="privacy_policy.html" title="View our privacy policy">Privacy policy</a></li>
	  <li><a href="terms.html" title="View our Terms &amp; Conditions">Terms &amp; conditions</a></li>
	  <li><a href="press/index.html" title="Read about Mobal in the press">Press</a></li>
	  <li><a href="http://www.shareasale.com/shareasale.cfm?merchantID=12460" title="Affiliate Schemes">Affiliates</a></li>
	  <li><a href="travel_resources.html" title="Useful travel resources">Travel Resources</a></li>
	</ul></div>
	<div id="footer-nav2">
	<ul>
	  <li><a href="referfriend/index.html" title="Refer a Friend">Refer a Friend</a></li>
	  <li><a href="link_info.html" title="Link to our site!">Link to Us</a></li>
	  <li><a href="international/international-cell-phones.html" title="International Cell Phones">International Cell Phones</a></li>
	  <li><a href="international_cell_phone_rental.html" title="See our Rental Guide">Rental Guide</a></li>  
	</ul>
	</div>
	<p>30 August 2007</p>
	</div>
	</div>
</div>
<script src="../www.google-analytics.com/urchin_lpo.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-940262-1";
_udn="none";
_ulink=1; 
if (typeof(urchinTracker) == 'function') urchinTracker();
</script>

</body>
</html>

**Tailslide** · Aug 30, 2007 05:25

Even with widths adding up to 100% I find that sometimes IE has maths "issues" so I tend to keep widths to a total of 99% instead.

**limepickle** · Aug 30, 2007 06:51

EDIT - I see from the post above. SEtting the width of col 2 to be slightly less than 40% does the trick.

User Tag List

Thread: How does IE deal with floats differently?

Thread Tools

Display

How does IE deal with floats differently?

Bookmarks

Bookmarks

Posting Permissions