I am trying to design columns with specific widths and margins in percentages that can fit inside any container with a dynamic width.
<div class="gridFluid">
<div class="col-1-4"></div>
<div class="col-1-4"></div>
<div class="col-1-4"></div>
<div class="col-1-4"></div>
</div>
* {
margin: 0;
padding: 0;
}
body {
font-size: 1%
}
.gridFluid {
width: 960px;
display: table;
background: #eee;
font-size: 0px;
overflow: auto;
zoom: 1;
}
.col-1-4 {
background: #ddd;
height: 200px;
width: 23%;
display: table-cell;
*display: inline;
zoom:1;
margin-left: 1%;
margin-right: 1%;
float: left;
}
This layout works perfectly everywhere except in IE7, where the last column does not fit properly in a single line. This issue may be due to unnecessary spacing between DIVs other than the margin.
Using different widths or margins for IE7 is not an ideal solution. I am seeking a better way to address this problem without compromising the overall design integrity.
It seems to be a common issue with IE7, as I have come across several related problems while researching for a solution but have not found a suitable resolution yet.