CSS absolute DIV causing other absolute DIV problems
- by Tim
Hello,
I have implemented a chat script which requires an absolutely positioned DIV to be wrapped around the pages content.
This is to ensure the chat windows stay at the bottom.
The problem is that because of the absolute positioning of this main wrapper, all other absolutely positioned elements (eg. Jquery Auto-completes, datepicker's etc) now scroll up and down with the page.
Here is an example of the HTML:
<body>
<div id="main_container">
<div id="content">Elements like Jquery Autocompletes, Datepickers with absolute positioned elements in here</div>
</div>
The DIV "main_container" style looks like this:
#main_container {
width:100%;
background-color:#ffffff; /* DO NOT REMOVE THIS; or you'll have issue w/ the scrollbar, when the mouse pointer is on a white space */
overflow-x: hidden;
overflow-y: scroll;
height:100%; /* this will make sure that the height will extend at the bottom */
position:absolute; /* container div must be absolute, for our fixed bar to work */
}
I hope there is a simple fix as the chat script is too good to get rid of.
Thanks,
Tim
