Geek asks and answers

CSS, position: absolute, scrollbar

Let's 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 does the horizontal scrollbar only account for CORRECT overflow?

In other words, why doesn't LEFT start the scroll bar, but does RIGHT do?

Is there any way, besides body -> overflow: hidden, for ROTATION not to start the scroll bar?

Edit

What I'm trying to achieve is a wrapper in the middle of the page (for example, any other "content" panel - basically div -> margins: 0 auto;. This should cause a horizontal scrollbar if the screen is too small. Problem, I want another div to "stick out" wrappers - they should not trigger a 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>

, . , . , , , . , , ?

+3
2

.

, overflow: hidden 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
}
+4

, , -. / , ( 1000 ) .

960 ( - 960), , .

:

<div class="container">
    <div class="main">
        <p>Main content</p>
    </div>
    <div class="sidebar">
        <p>
          Sidebar content
        </p>
    </div>
</div>

CSS

.container {width:960px;margin:0 auto;position:relative;}
.main {padding-right:100px}
.sidebar {width:400px;position:absolute;top:0;right:-100px}

 // The fix:
@media only screen and (min-width: 960px) {
 html {overflow-x:hidden} // no scroll if window width is > 960px
}
+1

More articles:


All Articles