To anyone out there reading up on clearing, this is the best method:
http://www.positioniseverything.net/easyclearing.html
It’s totally cross-browser compatible, doesn’t leave any messy markup and leaves the code fully accessible. It does however have 1 flaw…
Scroll down to the part about the IE/Mac problem and you’ll see the fix involves adding a display: inline-block to the container block, which is then re-instated to a display: block in the IE stylesheet.
The problem is that inline-block also affects all the other non-IE browsers. This gives us a wrapper that’s not 100% wide. So what can we do?
Initial Setup
The following example will work on every modern browsing environment except Internet Explorer on Macs. You may just want to leave it like this and not bother accommodating the ancient browser.
MyPage.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" media="screen" />
<![endif]-->
</head>
<body>
<div class="clear">
<div style="float: left;"></div>
<div style="float: right;"></div>
</div>
</body>
</html>
main.css
.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
ie.css
.clear { zoom:1; }
Getting it working in IE/Mac
As described in the P.I.E article, an inline-block trigger on the wrapper will trigger Internet Explorer’s built in auto-clearing. There are 2 ways to do this:
Overwriting display
Apply 100% width to the inline-block in your main stylesheet This works 99% of the time, just be aware of issues with the IE box model bug.
Add this code to main.css after the clear:after rule:
.clear { display:inline-block; width:100%; }
You now need to revert the display property back to block for IE/Win to get the auto-clearing effect to work. Replace the code in ie.css with:
.clear { zoom:1; display:block; }
Browser sniffers
Have different stylesheets for IE/Win and IE/Mac and include them using a server-side or JavaScript browser sniffer. This is arguably the cleanest fix.
First off remove the conditional include from MyPage.html (<!–[if IE]> …). This file will be included later on using a different method.
Create a new file called iemac.css:
.clear { display:inline-block; width:100%; }
PHP users can them add this code in the html <head> element:
<?php
$browser = strtolower($_SERVER['HTTP_USER_AGENT']);
if (strpos($browser, 'msie')) {
if (strpos($browser, 'mac')) {
echo "<link rel='stylesheet' type='text/css' href='iemac.css' />";
}
echo "<link rel='stylesheet' type='text/css' href='ie.css' />";
}
?>
Alternatively, you can apply a fix using JavaScript. Again this goes in the <head>:
<script language="javascript" type="text/javascript">
<!--
if (navigator.appName.indexOf("Microsoft Internet Explorer") >= 0) {
if (navigator.platform.indexOf("Mac") >= 0) {
document.write("<link rel='stylesheet' type='text/css' href='iemac.css' />");
}
document.write("<link rel='stylesheet' type='text/css' href='ie.css' />");
}
// -->
</script>
A quick note to developers that are styling elements that use monospace fonts (pre, code, q, etc). Be aware that some browsers, like Safari and Chrome, have their own fixed-width font size preference, which by default is set to 13px. This upsets proceedings when you apply a proportional (% or em) font-size to the body.