I've got photo gallery app with a fluid layout. The #header & #controls are set to position:fixed so that when the user scrolls, they stay on the top of the window.

The div that contains all the photos, #people is positioned below the controls with padding. On a standard 1280 x 1024 window everything looks fine.

However, when the window gets smaller, the controls wrap, and #controls gets taller. Consequently, #people then gets partially hidden.

Is there a CSS only way to make #people move to accommodate the height change? I'm fairly certain there isn't, as fixed elements get taken out of the document flow. I thought I'd ask anyway.

  • I'm thinking javascript is the answer, but I am not sure. I am interested in what people answer for this question because there are some neat things that can be done with CSS 3 and the calc() function. Abinadi Ayerdis over 7 years ago