Negative Margins and Floats in IE9 - html

Question

I'm trying to accomplish a 3 column fluid layout with an additional span at the bottom that covers the last 2 columns. In addition, I need to use source ordering so that the middle column is actually the first column in the markup.
I have an example fiddle working in chrome/safari/firefox here: http://jsfiddle.net/66krg9cr/6/
<div class="container">
<div class="middle">
<div style="height: 400px;"></div>
</div>
<div class="left">
<div style="height: 600px;"></div>
</div>
<div class="right">
<div style="height: 200px;"></div>
</div>
<div class="bottom"></div>
</div>
* {
box-sizing: border-box;
}
.container {
max-width: 90%;
margin: auto;
overflow: hidden;
}
.middle {
width: 48.59114%;
float: left;
margin-left: 25.70443%; // push toward the middle
margin-right: 2.81771%;
background: #000;
}
.left {
background: #333;
margin-left: -77.11328%; // pull towards the left
width: 22.88672%;
float: left;
}
.right {
background: #666;
width: 22.88672%;
float: right;
height: 200px;
margin-bottom: -9999px; // equal height column trick
padding-bottom: 9999px;
}
.bottom {
background: #999;
width: 77.11328%; // width of the last two columns combined
float: right;
height: 200px;
}
Unfortunately, I can't get this working correctly with IE9. In that browser, the bottom 2 column span drops below the bottom of the first column instead of being beside it. It seems the problem is the source ordering. If I change the order in the HTML to match the visual layout, then IE behaves. It's like IE remembers the height of the first column before it's moved left, and lays out the bottom span according to that height.
I would move the HTML around and just solve the problem, but it's going through a rigorous accessibility/screen reader review, and i know I would get dinged for not having the main content at the top of the source code.
Also, content in these divs will be dynamic in production, so I can't rely on knowing the height of any one column.
Any help would be greatly appreciated.

Answer 1

Why not stray away from negative margins and break the whole thing up into wrappers like this:
HTML:
<div class="container">
<div class="container-main">
<div class="top">
<div></div>
<div></div>
</div>
<div class="bottom"></div>
</div>
<div class="container-left">
<div class="left"></div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
.container {
position: relative;
width: 90%;
margin: auto;
overflow: hidden;
}
.container-main {
position: relative;
float: right;
width: 77%;
margin: 0;
min-height: 100%;
}
.container-left {
position: relative;
float: left;
width: 23%;
margin: 0;
min-height: 100%;
}
.container-main .top {
width: 100%;
min-height: 400px;
}
.container-main .top > div:first-child {
width: 70%;
float: left;
background: #000;
height: 400px;
}
.container-main .top > div:last-child {
background: #666;
width: 30%;
float: right;
height: 400px;
}
.container-main .bottom {
background: #999;
width: 100%;
height: 200px;
}
.container-left .left {
background: #333;
width: 100%;
height: 600px;
}
Your main content is still at the top. If you don't have to have everything in one wrapper then this may work, I can't test it in older IE versions though, but you can give it a try and let me know!
Here is a Fiddle of the above in action: http://jsfiddle.net/egxfnjzL/
...and just for fun, here is an exact copy of what you had: http://jsfiddle.net/whkqnnyg/