Div bothers other divs when became higher

[Fritz]

Hi,

The page fits nicely within a viewport of 1022px, so without scrollbars. But when the Div, here purple, become higher than 336px, the page does not fit anymore.
In this div I want to put some images: 2 rows of 3 images with a gap of ± 20 px.

Link : https://bloemenstickers.be/test-afbeeldingen-row-height.html

Somebody can help me …

Kind Regards,
Yam.

[Shikkediel]

It’s probably not just me having trouble figuring out what issue you’re describing…

[Fritz]

Hi,

When making the purple div higher till the page doesn’t fit on screen in height, the width becomes more than 1022px. The max width of the page must be 1022px.

See page source : https://bloemenstickers.be/test-afbeeldingen-row-height.html

purple div :
.afb_row {
width: 1022px;
margin-top: 20px;
height: 340px;
background-color: #C9C;
display: inline-block;
}

[Shikkediel]

I’m assuming you mean exactly 1022 pixels because on a large screen there seems to be no issue. What happens is that the vertical scrollbar appears, which itself takes up space – then the effective screen size isn’t 1022 pixels anymore. Any smaller screen will have a horizontal scrollbar as well. Working with fixed widths, I don’t see how to avoid this.

[Fritz]

I forgot the scrollbar width in my calculation.

When I make the width to 1005px , the page will show nice. The width of a scrollbar is like 17px . 1005 + 17 = 1022px, so the site fits on a 1024px screen with scrollbars.

Thanks.

[Author]

Posts