Make image divs horizontally overflow parent div

Question

I'm having a very simple problem which I can't overcome. I have a parent div, with 4 images inside, I would like the images to overflow from the parent div (horizontally) but I can't seem to achieve this.

.imgBanner {
   border: 1px solid black;
   width: 400px;
   height: 400px;
   display: inline-block;
}
.slideShow {
   width: 400px;
}

<div class="slideShow">
  <img class="imgBanner">
  <img class="imgBanner">
  <img class="imgBanner">
  <img class="imgBanner">
</div>

This is the code that I am using, but it doesn't seem to overflow, even though I am using display inline-block.

The outcome will be to hide the overflown images, and use JavaScript to create a slideshow.

EDIT: Forgot to add the fiddle. https://jsfiddle.net/pwL2hy7s/

Thanks :)

score 3 · Accepted Answer · answered Jan 28 '16 at 13:51

3

You can use

white-space: nowrap;

on the container. This will allow the elements to continue being inline, without being forced to break.

answered Jan 28 '16 at 13:51

GMchris

5,439
4
22
40

You can also add overflow: hidden to the same container element, to hide the overflowing images. – GMchris Jan 28 '16 at 13:53
Perfect, just what I needed. Thanks! – DevStacker Jan 28 '16 at 13:54

score 1 · Answer 2 · edited May 23 '17 at 12:23

I think this is exactly what you're tying to achieve. See the demo and comments inline below.

.slideShow {
  width: 400px;
  white-space: nowrap; /*prevent wrapping*/
  overflow: auto; /*show scrollbar as needed*/
  font-size: 0; /*remove whitespace*/
}
.imgBanner {
  background: aqua;
  width: 400px;
  height: 400px;
  display:inline-block;
  vertical-align: top;
}
.imgBanner:nth-child(odd) {
  background: gold;
}

<div class="slideShow">
  <div class="imgBanner"></div>
  <div class="imgBanner"></div>
  <div class="imgBanner"></div>
  <div class="imgBanner"></div>
</div>

Read more about the inline block whitespace at How to remove the space between inline-block elements?

Make image divs horizontally overflow parent div

2 Answers2