0

See this fiddle: http://jsfiddle.net/eEe2C/2/

The green row 1 is fixed but does not stretch the entire parent width which the other blue rows do. Think of row 1 as the column headers in a grid. It needs to be fixed in order to be visible at all times and for all rows to "slide" underneath it when scrolling. The only difference between row 1 and the other rows is that row 1 has position:fixed.

When resizing horizontally, the "cells" of the blue rows expand just fine according to their width percentage. The "cells" of the green row ignores this (I know why, just need a solution).

How do I get the same stretching behaviour for row 1 still keeping it fixed? The headers should of course be aligned with the data "cells". Please, no post-js hack if possible.

Edit: can't use tables as I'm using drag'n'drop sorting that doesn't play well at all with tables.

tobefound
  • 1,091
  • 2
  • 9
  • 15
  • 3
    Is there any reason why you need to use CSS to fake what an HTML table would do implicitly? –  Apr 27 '11 at 22:24
  • As far as i know this isn't possible without a JS hack. But... i'm no expert. – Thomas Shields Apr 27 '11 at 22:24
  • Well, the rows are involved with a lot of drag'n'drop sorting which doesn't play well with tables. Also, I'm not able to style tables well cross-browser. – tobefound Apr 28 '11 at 08:31
  • Setting width:100% on row1 makes it occupy the entire browser window which leads me to believe that there must be a way for it to occupy the entire width of some other parent element...? Any gurus? – tobefound Apr 28 '11 at 08:50

2 Answers2

0

If I'm understanding it correctly, do you mean like this? Although you might want to set a specific width on the container.

http://jsfiddle.net/eEe2C/6/

Winter
  • 368
  • 4
  • 15
  • Nope, I still need row1 to be position:fixed so that row1 stays in viewport no matter scrolling position. – tobefound Apr 28 '11 at 08:37
  • I see what you mean. Maybe this is what you are seeking: http://jsfiddle.net/eEe2C/12/ Since there was no CSS reset, I think there was some default margin and padding, so i set the body to 0 for both. I added some background to see where the elements were, but you can take those out. – Winter Apr 28 '11 at 19:20
  • Yes, works, but I really need a more generic solution where the parent container dictates the expansion width for all contained elements. – tobefound Apr 29 '11 at 14:42
0

Even though it's a demo, it looks like tabular data to me so just use a <table>. Using a table with a fixed height <tbody> might be a good solution to your problem.

Marcel
  • 27,922
  • 9
  • 70
  • 85