0

First of all, pardon me for bringing up this hugely discussed issue once more through this question.

My site has a Dashboard (similar to iGoogle) and an option for the user to switch between different layout options for the Dashboard. A couple of these layouts have table cells spanning more than a row and/or column (rowspan and colspan). At such cells the <div> within does not occupy the 100% height available inside <td> when the browser window is re-sized to a small view - around 800x570. My current resolution is 1280x1024.

The layout is like this: Problematic layout

Some style information:
body height: 100%;
table cellspacing: 0; cellpadding: 0; border-spacing: 2px; margin: 0; padding: 0;
th, tr, td vertical-align: top;

I have read and applied solutions of these posts, but to no avail.
Full height div inside td
DIV stretch to height 100% in a table cell
Getting div to occupy full cell height
How to make <div> fill <td> height

Please help!

Community
  • 1
  • 1
Horizon
  • 291
  • 4
  • 14
  • create a jsfiddle or paste complete code here including html –  Jun 19 '12 at 10:37
  • Its more than 3000 lines of code including HTML, CSS and JavaScript. I am trying to downsize it to the problem points only. Need more time. – Horizon Jun 20 '12 at 13:16
  • @Somebodyisintrouble: I found the problem while downsizing the html for you. The issue was with the content of the smaller cells of the first row. When the browser was re-sized to a small size, the `div` contents of these small td's would stack above one another (originally, side-by-side), thus increasing the total height requirement of the cell as compared to the other three large cells. I have worked around this by ensuring a minimum width of 990px for this layout and 1160px for the body `(min-width:)`. Hope that is not a wrong way of doing it. Thanks anyways. – Horizon Jun 22 '12 at 06:04

1 Answers1

0

The issue was with the content of the smaller cells of the first row. When the browser was re-sized to a small size, the div contents of these small td's would stack above one another (originally, side-by-side), thus increasing the total height requirement of the cell as compared to the other three large cells. I have worked around this by ensuring a minimum width of 990px for this layout and 1160px for the body (min-width:)

Horizon
  • 291
  • 4
  • 14