Search code examples
csscss-positionresizable

resizable, fixed position element; responsive, relatively positioned content

I have a fixed div #summary which changes height. It needs to always show at the top of the window. Below it I have content #catalogueContainer which i need to re-position when the fixed div above changes height. I need to be able to scroll through using the window scroll bar.

I understand the only way to keep the #summary div at the top of the window is to give it a fixed position. When doing this, #catalogueContainer has no relationship to it and so i can't re-position using CSS when #summary changes height. The only way i can think is to have some javascript which listens for the re-size of summary and specifies the top position of the #catalogue.

  1. Does this sound the most efficient solution? Code and notes below.
  2. In Chrome, when i scroll through the window, the background image of #summary is left behind, but all the other content stays fixed to the top of my browser window as i scroll.

Any suggestions on fixing this?

#summary {
    position:fixed;
    top:0px;
    left:275px;
}

#summary has re-sizable elements within, and changes height. This needs to always show at the top of the window. 

#right {
    position:relative;
    left:275px;
    top:300px;
}

#right is the container element for all the below.

There are numerous catalogs in the #catalogueContainer, all in the same place, but only one is visible at a time.

#catalogueOne {
    position:relative;
}

#catalogueOne needs to be relative because there are position:absolute elements inside

Solution

  • You could place summary and catalogue in a container (which you then place at the top). Then they just need to have a 100% width and float:left. When summary changes height, catalogue will be pushed up or down.

    You could also use jQuery and use a function that places catalogue according to the height of summary. Both needs to have a fixed position.