Fluid Layout Pure CSS - html

Question

I am trying to create a fluid layout.
Everything is working FF, Chrome, Safari and IE8
This just doesn't work in IE7. I am sure it's a problem with the floated containers.
Tried to do a couple clear fixes, but that didn't seem to work. Just not sure what I am missing, any thoughts or suggestions are appreciated.
If you compare how it renders in IE7 to IE8 a few things I noticed:
The background-color for the first row is the background color of the
container
The bottom border and margin of the container are missing
Here is a live example on jsFiddle
Here's the HTML
<div class="container layout">
<div class="containerContent row">
<div class="group">
<div class="column">
<div class="component">
Player 1:
</div>
</div>
<div class="column">
<div class="component">
<input class="text" type="text"/>
</div>
</div>
</div>
<div class="groupByTwo group">
<div class="column">
<div class="component">
Player 2:
</div>
</div>
<div class="column">
<div class="component">
<input class="text" type="text"/>
</div>
</div>
</div>
<div class="clearFix"></div>
</div>
</div>
Here is the CSS
.container{
margin: 5px;
border: 1px solid #fff;
background-color: #aaa;
}
.containerContent{
margin: 1px;
background-color: #f5f5f5;
}
.group{
float: left;
width: 50%;
overflow: hidden;
}
.column{
float: left;
width: 50%;
overflow: hidden;
}
.component{
padding: 5px;
}
.clearFix{
clear: both;
}

Answer 1

It's definitely a hasLayout issue, like skybondsor said.
The best way I've seen for clearing floats is as such:
.floatParent {
zoom: 1; <-- this is for IE7
}
.floatParent:after { <-- this is for all the good browsers
content: "\0020";
clear: both;
display: block;
}
Then you can remove that anti-semantic clearfix div from the markup, and just have something clean like this:
<div class="floatParent">
<div class="floating">I FLOAT!</div>
<div class="floating">WHOA ME TOO!</div>
</div>
Then it's just a matter of fixing up those pesky form fields, which for some reason always cause layout issues (by dropping on to the next line).