Home/ Questions/Q 803531
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T23:46:33+00:00

I have implemented a chat script which requires an absolutely positioned DIV to be

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    1. You are probably better off making what you want to stay in a fixed position relative to the viewport, position:fixed;.
    2. The background colour seems like a bad hack.
    3. You can make the sorrounding element (main) position:relative without giving it top/left/right/bottom properties and each “fixed” element within, position:absolute, as they will now be relative to the parent which has position:relative.
    4. If none of these work, post more code, especially for the positioning of your “elements that scroll up and down with the page”. It’s also unclear what you mean with “page”. Body? Html? Viewport? main’s contents?
    • 0