Home/ Questions/Q 4109264
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T21:46:25+00:00

Say there is a page: <html><body> <div style=position: relative;> <div style=position: absolute; left: -30px;>LEFT</div>

  • 0

Say there is a page:

<html><body>
<div style="position: relative;">
  <div style="position: absolute; left: -30px;">LEFT</div>
  <div style="position: absolute; right: -30px;">RIGHT</div>
<div>
</body></html>

Why the horizontal scrollbar only accounts for the RIGHT overflow?

In other words, why LEFT triggers no scrollbar, while RIGHT does?

Is there a way, other than body -> overflow: hidden, for RIGHT not to trigger the scrollbar?

Edit:

What I try to achieve is a wrapper in the middle of page (like any other “content” pane out there – basically div -> margins: 0 auto;. This should trigger horizontal scrollbar if the screen is too small. Then, and this is the problem, I want another div’s to “stick outside” of the wrapper – these should not trigger the scrollbar.

Edit 2:

<html><body>
<div id="wrapper" style="position: relative; margin: auto; 
  width: 400px; height: 200px; background-color: red;">
  <div style="position: absolute; left: -30px;">LEFT</div>
  <div style="position: absolute; right: -30px;">RIGHT</div>
<div>
</body></html>

When the screen is wide enough, everything’s fine. But as I try to shrink the screen, all of sudden a horizontal scrollbar appears. The problem is, it only allows to scroll to see RIGHT, and not LEFT. Is the a way to for the scrollbar not to appear until the wrapper, and only the wrapper, is larger than the screen?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    After your clarification, I understand the problem.

    You can get around it by adding a wrapper element, and giving that overflow: hidden, and a min-width.

    Live Demo

    HTML:

    <div id="outerContainer">
    <div id="container">
        <div id="left">left</div>
        <div id="right">right</div>
        text
    </div>
</div>

    CSS:

    html, body {
    margin: 0; padding: 0; border: 0
}

#outerContainer {
    overflow: hidden;
    min-width: 300px
}
#container {
    margin: 0 auto;
    width: 300px;
    background: #ccc;
    position: relative
}

#left, #right {
    position: absolute;
    background: #666;
    width: 60px
}
#left {
    left: -60px
}
#right {
    right: -60px
}
    • 0