fixing floated div's on screen while middle scrolls 1

[1DMF]

I've been playing with the following CSS.

html {
  height: 100%;
  overflow: hidden;
}
body {
  margin: 0px;
  padding: 0px;
  height: 100%;
  overflow: auto;
}

which enables keeping content that fits on the screen to stay there while the scroll bar only moves content that overflows, nice little bit of CSS.

HOWEVER! - I can only get it to work in I.E. , is it possible to make this work in FF?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

I don't really know what you mean with working or not working. I presume the code you posted works in both browsers, but what is it you really want it to do?

 

[1DMF]

i guess the best thing is to give you the link and you will see what i mean, works fine in I.E. but not FF.

http://www.independentmortgagenetwork.co.uk/index-1.html

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

Your problem is that your left content container has no tangible content but one div that is fixed in position. As such, your left content has 0 height and everything within this div is taken out of the flow of the document -- and your main column then covers the left one. A simple solution is to just give your left column div some height, or even simpler, a min-height will work as well. After adding [tt]min-height: 100px;[/tt] to the #side_left_container the pages looks and works ok in my FF.

 

[1DMF]

wow - thanks Vragabond, I didn't realise that a div which only has a div in it (regardles of the content of the child div) breaks out of the document flow.

Why is that, the content of #side_left_container is #side_left and the only reason I put the #side_left_container around it is because it's the only way to make an absolute positioned div stay within it's relative position regarding the rest of the page.

oh well got there in the end - again many thanks



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

Maybe you did not understand. #side left is positioned fixed, so it is taken out of the flow. That makes #side_left_container contain no elements that are not taken out of the flow, effectively making it an empty element. As an empty element it takes up no space and #wrapper, floating to the left, can float all the way to the left. If #side_left_container has some content, then it works. We fixed that by giving it a min-height.

 

[1DMF]

but right side is fixed also and that isn't taken out the document flow. Your right i don't understand, just as well you do

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.