Let's discuss the challenge of having 3 floated columns.
Take a look at this example: http://jsfiddle.net/A9dqD/
html, body {height: 100%;}
#a {
float: left;
height: 100%;
width: 50%;
background-color: green;
}
#b {
float: left;
height: 100px;
width: 50%;
background-color: blue;
}
#c {
float: left;
height: 300px;
width: 50%;
background-color: red;
}
The goal is to make column A as tall as column C (to match backgrounds).
Currently, it appears that making column a take 100% of the screen height is a challenge. The body takes up 100% of the viewport height but not the entire document height, resulting in column a being only as tall as the viewport.
For a real-life example, check out:
Instead of using jQuery to manually set the height, I'm exploring simple CSS tricks to achieve this. Your input is greatly appreciated!
Thank you!