I know this is possible, but it is driving me mad.

For example's sake, I have just 2 divs inside the body tag of a page.

Both divs are to scale the full width of the body

The first div is just 100px heigh

The second div is to be placed underneath and consumes the remaining height of the body.

So basically we have 2 rows, a) is 100px heigh, and b) is (body_height - 100px).

Do I have to resort to using Javascript to get this working cross browser? or will CSS suffice?

Can anyone offer a code example that works cross browser? I have looked for this online, but can't find exactly what I'm looking for.

OK I think I got it working. Using absolute positioning of div B, seems to be working in FF3 and IE6 anyway.

when you work with div height is very difficult to get it right due to user screen resolution and size.
Best is to probably go for the "min-height" value in your css.

__________________
:. Web Design & Development Web Design Ireland
:. Search Engines Optimization Search Engines Optimization
:. Car Parts & Accessories Car Parts
:. Cars Ireland Cars Ireland
:. I Have 2 Find It Directory SEF Directory

This one has wrecked my head a few times
My currant method which works on most browsers is to set the div hight to

This should work:

If you don't want to risk truncating content in the top div then change 'overflow' to 'scroll'.

Use this handy service to test your code for cross-browser compatibility: Test your web design in different browsers - Browsershots

__________________
The cure for boredom is curiosity. There is no cure for curiosity - Dorothy Parker