[Resolved] Little move of text container if text length does not touch footer?

[Walter Schwarz]

It took a while – but now I am sure:

Some pages jumped some pixels to the right or to the left “without reason” compared to the page leaving. I checked a lot and ended with the conclusion:

This effect happens if the text length (independent from 1 to 3 columns design) varies from disappearing behind the footer or not (brief abstract).

Am I right and could someone verify this effect? Is there any HotFix or CSS I could use to eliminate this behavior?

Thank you for any hint and support,
Walter

[David]

Hi there,

is there any particular page i can see the issue happen?

[Walter Schwarz]

Hi David,

please look at https://wertanalyse.mobi

I made two duplicates of “wertanalyse v0” and positioned these at the top menu (v1 and v2).

You will see that v1 moves some pixels to the right – because I shortened the text from the main column to end above the footer.

In v2 I added the right widget as it is in v0. The text of this disappears behind the footer. And bingo: now the content jumps back to the left = to the original position of v0.

My conclusion: the jumps do have to do something with the 3-columns-container CSS description/layout and the fact, if all columns end above the footer or at least one column disappears behind it.

Could you please check and solve this problem?

Thank you,
Walter

[Tom]

Hi there,

I believe what you’re seeing is the difference between your browser showing the scrollbar or not. v1 isn’t long enough to have a scrollbar, so the page is wider. v2 has a scrollbar, so it’s a little less wide.

[Walter Schwarz]

Hi Tom,

I think, you are right. How could I compensate it via css? I remember there exists a css element/code, that inserts a “functionless” scroll bar with the only function to insert the bar. Do you know an elegant solution?

In the meantime I found out:

“overflow-y: scroll” would be an acceptable solution. But how to override “Inside:2”?
Where and how has it exactly to be inserted?

SOLVED: overflow-y: scroll; in “body” von style.css (child-Verzeichnis)

body {
font-size: 1.00em; /* hyphens */
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
background-color: white;
overflow-y: scroll; /* Scrollbalken ohne Button wird auch bei Seiten mit wenig Text eingeblendet, um horizontales Bildspringen zu verhindern */
}

Cheers.

[Tom]

Glad you found a solution, thanks for posting it 🙂

[Author]

Posts