CSS: position:absolute and width

Gallex · 2018-06-17 13:00:39

can anybody tell me, why at the top of a page width:3000px creates the margin to the right side in this site ?
it has position:absolute; , it should not done this, is’nt?

css:

.top .container::before {
    background: rgba(255,255,255, 1);
    content: ' ';
    top: 0;
    bottom: 0;
    left: 0;
    width: 3000px;
    height: 100%;
    position: absolute;
    z-index: -100;
}

phiw13 · 2018-06-17 13:59:39

Well, your 3000px wide element is a little bit wider [*] than the width of my browser window, thus it creates overflow on the body; what you see is the space the browser creates to allow you to scroll till the end of that element. That is the expected behavior.

[*] 1680px overflow if you are curious

It is exactly the same as this test case:

<!doctype html>
<meta charset="utf-8">
<style>
div.a { width: 100px; height: 100px; background: red; position: relative; }
div.b { width: 300px; height: 20px; background: lime; pposition: absolute; }
</style>
<div class="a"><div class="b"></div></div>

the lime block “hangs” outside of the red (parent) block.

gaekwad · 2018-06-17 19:32:57

phiw13 wrote #312601:

Well, your 3000px wide element is a little bit wider [*] than the width of my browser window

We can fix that. You’ll need a deep wallet, though:

(49”, 3840 × 1080, RRP: 899GBP)

phiw13 · 2018-06-17 22:11:01

gaekwad wrote #312602:

We can fix that. You’ll need a deep wallet, though […]

Does that come with a large room to put it in place ?

Gallex · 2018-06-18 07:35:57

phiw13 wrote #312601:

Well, your 3000px wide element is a little bit wider [*] than the width of my browser window, thus it creates overflow on the body; what you see is the space the browser creates to allow you to scroll till the end of that element. That is the expected behavior.

phiw13, i have used the same code without problems in many sites, in many places, like here for example
how you explain this?

phiw13 · 2018-06-18 08:15:45

Gallex wrote #312606:

phiw13, i have used the same code without problems in many sites, in many places, like here for example
how you explain this?

Hmm… lemmesee. Oh. Compare the computed values for the div[id=container] on the two sites. Hint, look for a property that starts with the letter p.

The offending element parent (.top) has a different positioning context. On the working site, the positioning context is controlled by the element with overflow:hidden, where as the failing site, the positioning context is body.

Edit : for a refresher, see CSS2.1 chapter9, here

Last edited by phiw13 (2018-06-18 08:17:13)

gaekwad · 2018-06-18 08:46:30

phiw13 wrote #312604:

Does that come with a large room to put it in place ?

Yes. The shipping box.

Gallex · 2018-06-18 08:53:36

phiw13 wrote #312607:

Hmm… lemmesee. Oh. Compare the computed values for the div[id=container] on the two sites. Hint, look for a property that starts with the letter p.

The offending element parent (.top) has a different positioning context. On the working site, the positioning context is controlled by the element with overflow:hidden, where as the failing site, the positioning context is body.

huh, thank you!!! i would not come to this by myself! ;)

i just needed to add position property for #container

#container {
width:100%;
overflow:hidden;
position:relative;
z-index:0;
}

phiw13 · 2018-06-18 08:55:00

gaekwad wrote #312608:

Yes. The shipping box.

Not tsuyu [1] resistent, I’m afraid.

¹ rainy season on these shores. Lots of rain.

phiw13 · 2018-06-18 08:58:01

Gallex wrote #312609:

huh, thank you!!! i would not come to this by myself! ;)

i just needed to add position property for #container

#container {...

Winner !

(two pair of eyes, etc…)

Textpattern CMS

Textpattern CMS support forum

#1 2018-06-17 13:00:39