Absolute positioning & overflow:auto

[webmarkart]

I'm working on a UI and I have come across two issues I cannot seem to figure out.

The first involves the use of overflow:auto. Within the link below the bottom section with the tabs is broken up into two separate tables - yes tables. It is tabular data so it is ok! Anyway I need the heading to be absolutely positioned and the data itself to fit inside the container and if needed have a scrollbar. I pretty much have it working except that I have to use a fixed pixel width for the tables. If I use a percentage, which is what I want, the columns within the two tables no longer line up because of the scrollbar and I often get a horizontal scrollbar. Any ideas how to effectively use percentage widths in this case to keep with the fluid layout?

My second issue involves absolute positioning specifically with IE. If I specify top, left, bottom, and right pixels it works fine in FF. The height and width of the map div adjust according to the browser. In IE however I can seemingly only specify top or bottom and left or right. I do not want to specify a specific width or height but IE basically doesn't think there is any content in that div to stretch it. I really want the div to stay X pixels from any given side to it is dynamically sized. Any solutions to this that anyone knows about?

http://www.webmarkart.com/digrec/proof.html

[koyama]

Originally Posted by webmarkart

Anyway I need the heading to be absolutely positioned and the data itself to fit inside the container and if needed have a scrollbar. I pretty much have it working except that I have to use a fixed pixel width for the tables. If I use a percentage, which is what I want, the columns within the two tables no longer line up because of the scrollbar and I often get a horizontal scrollbar. Any ideas how to effectively use percentage widths in this case to keep with the fluid layout?

I cannot think of a pure CSS solution to this problem. JavaScript may be your best option.

To begin with, you could let the heading be as wide as the data itself + the scrollbar. Then use JavaScript to get the width of the data (minus the scrollbar) and set the width of the heading accordingly. Altogether you will get an acceptable rendering when JavaScript is disabled and an enhanced rendering when enabled.

Originally Posted by webmarkart

In IE however I can seemingly only specify top or bottom and left or right.

I guess that you are referring to IE6 because in this browser you cannot simultaneously specify values for opposite offsets. More precisely, if you simultaneously specify a top and bottom offset, then bottom is ignored. Similarly, if you simultaneously specify a left and right offset, then right is ignored in the ltr-direction and vice versa.

Note that this issue has been resolved in IE7.

I'm not sure that I understand what you are trying to do, but again, JavaScript may be the solution.