I am in the process of creating a flexible layout design. Everything appears to be functioning as intended on FF, Chrome, Safari and IE8
However, I have encountered an issue with IE7. It seems to be related to the floated containers. I have attempted a few clear fixes without success. Any insights or recommendations would be greatly appreciated.
Upon comparing the rendering in IE7 to IE8, here are some discrepancies I have observed:
- The background-color for the first row matches the container's background color
- The bottom border and margin of the container are not displaying properly
You can view a live demo on jsFiddle
Below is the HTML structure:
<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>
And here is the corresponding 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;
}