CSS absolute DIV causing other absolute DIV problems
Posted
by Tim
on Stack Overflow
See other posts from Stack Overflow
or by Tim
Published on 2010-05-24T22:51:59Z
Indexed on
2010/05/24
23:11 UTC
Read the original article
Hit count: 379
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
© Stack Overflow or respective owner
