Home/ Questions/Q 6737685
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T11:16:42+00:00

In my web page, I have a div that stays static on the left

  • 0

In my web page, I have a div that stays static on the left even as the user scrolls.

This is the CSS for the div:

.floatingDiv
{
    position:fixed; 
    top:300px;
    left:70px;  
    padding:16px;
}

As you can see, I am positioning the div relative to the top left corner of the page.

However, my main content is only about 1000px wide, and I want to position this div from the left edge of my content rather than the left edge of the screen. At my resolution of 1440×900, the div currently is placed exactly halfway between the left edge of the screen and the left edge of the content, but if someone is using a wide-screen monitor, this floating div is rather far away from the content.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Got it to work by using javascript:

    <script type="text/javascript">
    function setFloatingDiv()
    {
        document.getElementById('floatdiv').style.left = (screen.width - 1200)/2 + 'px';
    }
    </script>
<body onload="setFloatingDiv()">

    Here’s a better way to do it so it works even if the window isn’t maximized:

    <script type="text/javascript">
 function setSidebar()
 {
    if (document.getElementById('main_container').offsetLeft > 150)
        {
            document.getElementById('floatdiv').style.visibility = 'visible';
            document.getElementById('floatdiv').style.left = (document.getElementById('main_container').offsetLeft - 150) + 'px';
        }       
        else //not enough space for it. Hide it
            document.getElementById('floatdiv').style.visibility = 'hidden';
 }
</script>

    I call this function onload and onresize

    • 0