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
.