How to get div to overflow without clicking other content in email in IE?

Question

How to get div to overflow without clicking other content in email in IE?

I am trying to place a div in an email so that it overflows the later delimiters, which are inline blocks (instead of dropping them), because the div in question is displayed: inline. It seems to work in Chrome, but I can't get it to display IE correctly, where it is limited to the inline div block posted later.

Here is an example of what I'm talking about (with a question about a blue background):

<html>
<head>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: 0;
}
div {
    *display: inline!important;
    _height: 1px;
}
</style>
</head>
<body style="width: 300px; height: 300px;">
  <div style="margin: 0; padding: 0; font-size: 1px; display: block!important; width: 300px; height: 300px; background-color: green;">
    <div style="margin: 0; padding: 0; font-size: 1px; display: inline-block; width: 300px; height: 10px; background-color: gray;"></div>
    <div style="margin: 0; padding: 0; font-size: 1px; display: inline-block; width: 10px; height: 280px; background-color: gray;"></div>
    <div style="margin: 0; padding: 0; display: inline-block; width: 280px; height: 280px; background-color: red; line-height: 23px; font-family: Helvetica, Arial, FreeSans, san0serif; color: #333;">
      <div style="margin: 0; padding: 0; margin-top: 0; width: 150px; height: 320px; background-color: blue; display: block;"></div>
    </div>
    <div style="margin: 0; padding: 0; display: inline-block; width: 10px; height: 280px; background-color: gray;"></div>
    <div style="margin: 0; padding: 0; display: inline-block; width: 300px; height: 10px; background-color: gray;"></div>
  </div>
</body>
</html>