Hi folks

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

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

  • Sorry about the huge image, by the way... Jack Webb-Heller about 9 years ago

1 answer


Looking at the visual I would make the columns 'faux' using a background image for the body or a wrapper so that col2 background will be full height, no matter what content.

I'd then pad the top of the col2 to make space for the tabs, which I'd set position: fixed, so they'd stick to the top of the viewport no matter what.

if you make col2 100% high, with overflow scroll it will have scroll bars when there's more content in it than browser window available, but it feels a bit clunky somehow...

Answered about 9 years ago by Tony Crockford
  • Cheers Tony! I'll have a go with position:fixed. Regarding the scrollbars, I've got a sleek jQuery scrollbar replacement solution which hopefully won't make it feel so clunky. Jack Webb-Heller about 9 years ago