HTML Pictures Horizontial Row

Question

Hello, I was wondering if there was a way to make a div containing images have an overflow that scrolls horizontially, as depicted in the projected diagram below:

as always, any help is greatly appreciated

Answer 1

Something like this should work:

#imageContainer { 
  height: 200px;
  overflow: auto; 
  white-space: nowrap; 
}

Make sure the images aren't higher than the height parameter.

Answer 2

Try just

overflow-x: auto;

Answer 3

You need to know the width and amount of images inside the div to prevent it from wrapping:

<div id="outer">
    <div id="inner" style="width: 3200px;">
        <img src="1.jpg" />
        <img src="2.jpg" />
        <img src="3.jpg" />
        <img src="4.jpg" />
    </div>
</div>

And in CSS:

#outer {
    overflow: hidden;
    width: 800px;
    height: 600px;
}

#inner {
    height: 600px;
}

This example assumes your images are 800x600px, adjust as necessary.