This might be an easy question, I just don’t know how to fix it… I’ll try to explain this the best I can.
Imagine my page, holding a couple of DIV’s. The lay-out is something like this:
| |
| MENU |
||
| | |
| SOME CONTENT | OTHER CONT. |
| SOME CONTENT DIV 1 | DIV 2 |
| SOME CONTENT | OTHER CONT. |
| SOME CONTENT | OTHER CONT. |
| | |
||
| |
| FOOTER |
|_________________________________________________|
To make it a little more clear, DIV 1 contains all of my products, DIV 2 contains a couple of checkboxes to specify the products. If the user wants to get rid of e.g. blue products, he can deselect the option “blue” in the specify list in DIV 2. All blue products in DIV 1 will be removed. What happens next is that the FOOTER is placed up, because the height of DIV 1 is decreasing (because some items were removed). Because of this, it might be possible that the height of DIV 2 is bigger than the height of DIV 1, what results in text overlaying the FOOTER. The FOOTER is placed under DIV 2. How can I fix this problem. So, FOOTER needs to stay directly beneath DIV 1, so if DIV 1 increases, FOOTER needs to move downwards with it. But if DIV 1 decreases, FOOTER has to move upwards and stick to the bottom of DIV 1, but it never can get any higher than the bottom of DIV 2. So no matter how small DIV 1’s gonna be, it needs to stay beneath DIV 2. DIV 2 has a fixed height, it won’t increase or decrease. DIV 1 will.