Maintain image layout on a webpage even after zoom?

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.

Answer 2

Set a fixed width to body or a site wrapper div. That way the size of the browser should have no effect on the elements of your site.

Answer 3

You can put overflow:hidden;..this will hide the third image when zoom in or out takes place. 2ndly fix the width of wrapper and all three images and put float on img div.but keep 3rd div width little less as compare to other.