I’d consider myself a reasonable standard CSS/XHTML chap but I’m pretty baffled by this.
The problem is available here: http://furnace.howcode.com – (note that the site is still in development, most stuff doesn’t work, and it’s likely to change fairly quickly as it is updated often).
Basically I’ve got a fluid layout that needs to work in the same proportions on any resolution.
Here’s a screenshot of how the designer invisioned it (I apologise for my Paint-tool anotations):
how the designer wants it to look http://files.droplr.com/files/49111734/XVu5m.howcode_working4.png
I want the tabs and the search box to STAY at the top of Col2, whilst there should be a scrollable area beneath it where the results are returned. I want NO vertical viewport scrolling, only within the 100%-height area thingy.
My problem is this. If you take a look at http://furnace.howcode.com, you’ll see that I’ve got a bit of a problem. I’ve made a placeholder black-background div which I will turn into the Tabs shortly. However I want the Col2 div to float BENEATH this and fill 100% of the remaining vertical height (i.e. go to the bottom of the screen, nomatter what the resolution is) and Col3 to be in the place where Col2 currently has been put (it normally is there automatically, when Col2 is in the right place!).
I hope that makes sense. If you need to me to clarify please just ask.
Cheers!
Jack
Make three height:100% divs (col1, col2, col3) that reach from top to bottom, and put the tabs etc. inside col2.