IE7 floats disappear when their parent is position:relative

Question

This is a pared down version of a problem I am facing with IE7. In all other (newer) browsers, this displays fine... why does position:relative; have an effect on float: right; or float: left;? Is there a way to keep the position: relative without sacrificing the functionality of float?

JS fiddle: http://jsfiddle.net/uW7JV/2/

Without position: relative;

With position: relative; (on the red box)

Even more trimmed-down version: http://jsfiddle.net/uW7JV/4/

Interesting... Removing the <div class="clearboth"></div> allows the content to show. However, I do need that functionality there, so I'm still looking for a fix. http://jsfiddle.net/uW7JV/9/

Answer 1

You need to add overflow: hidden to .column-wrapper so that it wraps its floating children. You won't need the .clearboth div and CSS at all after you do this.

The other issue you need to solve is column widths, since box-sizing: border-box is not supported in IE7, you need to account for your padding when assigning width.

div {
    padding: 5px 1%;
}
.column-wrapper {
    background: orange;
    position: relative;
    overflow: hidden;
}

.main {
    background: yellow;
    float: right;
    width: 64.6%;
}
.sidebar {
    float: left;
    background: green;
    width: 31.3%;
}

DEMO: http://jsfiddle.net/myajouri/uW7JV/15/

Another way to go about this is to use the Clearfix hack

.clearfix {
  zoom: 1; /* for IE6/7 */
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Then add the clearfix class to .column-wrapper.