In Internet Explorer, a combination of padding, floats, and a lack of background images can cause a <div> to overrun - but only on one side of the page. This bug is known to occur in IE6/Win. If you have seen it in other versions of IE, or can confirm it doesn’t occur, please contact me.
In Internet Explorer the <div> below overruns the left border of this page, although its content behaves as if it hadn’t. More bizarrely, depending on your font size, a non-rectangular part of the word ‘in’ at the start of the last paragraph may also disappear.
On this page a number of features interact with the bug, but the following code demonstrates a simpler way to cause the bug:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-gb">
<head><title>Internet's Explorer Asymmetric Overrun Bug</title></head>
<body>
<div style="padding-left:5em;">
<div style="background-image:none;border:thin solid black;">
<div style="float:right;">This div is floated right</div>
<div style="clear:right;">This div is cleared right</div>
</div>
</div>
</body>
</html>
A symmetric version of the bug (with ‘left’ and ‘right’ interchanged) does not exist. Removing background-image:none; is enough to fix the bug, but why this should effect the size of a <div> (not to mention the missing part of the word ‘in’) is a mystery.