Question

I currently have three images placed horizontally one after another on a webpage. When the user zooms in sufficiently, the page layout bumps the third image to be placed below the first two images. I would prefer that the image simply ‘disappears’ into the edge of the page so that the layout is maintained. How can I specify this behavior? Thank you.

Answer 1

Put into container and prevent wrapping

<div style="white-space: nowrap;">
    <img ... />
    <img ... />
    <img ... />
</div>

It is of course wiser to use CSS classes instead of inline styles.

And if you’d like to keep container unscrollable, you can set its overflow style to hidden.

Here’s a JSFiddle example that sets both styles on containing div element so third element (insetad of images I’ve used span but that’s not relevant) simply disappears over the edge. If you try to set span width to fixed pixel size and zoom the page in you will see that elements just disappear over the edge.