Currently, I am in the process of developing a responsive grid system by using a max-width of 980px to convert my fixed PX widths to percentages. However, I am facing some challenges in updating the heights that are also set in PX to %. Could anyone provide guidance on how I can accomplish this task? I attempted to set the height to max-height:300px; height:100%, but it did not yield successful results.
Check out Js Fiddle: http://jsfiddle.net/5jJQk/
Here is an Example of the CSS Code:
#ctn {
max-width: 980px; /* 960 */
width: 100%;
margin: 0 auto;
clear: left;
background: #eee;
padding: 10px;
}
.col {
background: #b7b7b7;
max-height: 300px;
height: 100%;
margin: 1.041666667%; /* 10/960 */
float: left;
}
.four {
width: 31.25%; /* 300/960 */
}
.eight {
width: 64.583333333%; /* 620/960 */
}
.twelve {
width: 97.916666667%; /* 940/960 */
clear: left;
}