N
Nik Coughlin
Why does a page behave differently with an element styled:
position: absolute;
left: -128px;
from the page with:
position: absolute:
right: -128px;
In the first case the absolutely positioned element is removed from the page
flow as expected, in the second case it's not. Examples:
http://nrkn.com/posAbsProblem/leftOnly.html
http://nrkn.com/posAbsProblem/rightOnly.html
You can see that when you resize the browser below a certain point the right
positioned element causes a horizontal scrollbar but the left positioned
element doesn't.
For further illumination, here is the same page with both left and right
positioned elements:
http://nrkn.com/posAbsProblem/index.html
Behaves the same as the page with only the right positioned element. And
the page with just the left behaves the same as a page with no positioned
elements:
http://nrkn.com/posAbsProblem/noBackgrounds.html
CSS is here:
http://nrkn.com/posAbsProblem/layout/main.css
The intention of all this is that the positioned elements are shown when
there is spare room for them, but disappear out of the viewport to make room
for the content if necessary, without creating a horizontal scrollbar.
Any idea of why this happens? As it happened in all the browsers I checked*
it is clearly supposed to work like this but I was under the impression that
absolutely positioning an element removes it from the page flow and I can't
see why in this example the left doesn't cause scrollbars but the right
does, with the only difference between them being whether it is positioned
left or right.
FF, Opera, Safari. Didn't try IE.
position: absolute;
left: -128px;
from the page with:
position: absolute:
right: -128px;
In the first case the absolutely positioned element is removed from the page
flow as expected, in the second case it's not. Examples:
http://nrkn.com/posAbsProblem/leftOnly.html
http://nrkn.com/posAbsProblem/rightOnly.html
You can see that when you resize the browser below a certain point the right
positioned element causes a horizontal scrollbar but the left positioned
element doesn't.
For further illumination, here is the same page with both left and right
positioned elements:
http://nrkn.com/posAbsProblem/index.html
Behaves the same as the page with only the right positioned element. And
the page with just the left behaves the same as a page with no positioned
elements:
http://nrkn.com/posAbsProblem/noBackgrounds.html
CSS is here:
http://nrkn.com/posAbsProblem/layout/main.css
The intention of all this is that the positioned elements are shown when
there is spare room for them, but disappear out of the viewport to make room
for the content if necessary, without creating a horizontal scrollbar.
Any idea of why this happens? As it happened in all the browsers I checked*
it is clearly supposed to work like this but I was under the impression that
absolutely positioning an element removes it from the page flow and I can't
see why in this example the left doesn't cause scrollbars but the right
does, with the only difference between them being whether it is positioned
left or right.
FF, Opera, Safari. Didn't try IE.