I don't understand why my column won't span to the top and bottom rows I created. It is supposed to look like the "Today" column is taller on the top and bottom then the other columns. I tried accomplishing this by adding rows above and below it and then using rowspan. For some reason, it only works on the bottom row.
It's a lot of code, and I wasn't sure what I should cut without deforming it all or adding a new variable (it needs a fluid height). JSFiddle: http://jsfiddle.net/DaAwesomeP/aU9Le/
Basic HTML Layout (the full fiddle has the css):
<td id="weatherForecast-DATE" class="weatherForecast-day weatherForecast-day-today" rowspan="2">
<!-- Cell Content for "Today" Here -->
<td id="weatherForecast-DATE" class="weatherForecast-day ">
<!-- Cell Content Here. There are 4 of these -->
An image showing what I am trying to accomplish:
I tried posting this on StackOverflow, but I was told it was a design question. So I saw this: http://meta.stackoverflow.com/questions/195208/is-it-ok-to-ask-questions-about-web-design-on-stackoverflow which said to post in on Pro Webmasters or User Experience, which I tried and then got suspended. I hope that the community on this site can answer my question.