Slashy Slashy - 5 months ago 33
HTML Question

Div inline alignment

I'm working on a simple image slider, which has a main container with a fixed width and then another div for controlling the movement of the slider.
It works fine but I would like to align the divs (with the

slide
class) beside each other, and the overflowing divs should be moved aside, and not "falling down".

I used the
overflow:hidden
property on the container and thought it should work and the overflowing divs should be on the sides but for some reason they keep falling down.
This is my pen:
http://codepen.io/anon/pen/xOZVPL

They jQuery code isn't relevant for the current problem, so just ignore it.
I would appreciate any help!

Answer

You need to add white-space: nowrap on the element which has the overflow: hidden to prevent its contents from wrapping around to the next line.

The overflow: hidden would only suppress the display of the portions that are outside the container but it won't prevent the content from wrapping around.

$(document).ready(function() {
  var index = Math.floor($(".slide").length / 2);
  $('.slide').eq(index).addClass("focus");
  $("#right").click(function() {
    $('.slide').eq(index).removeClass("focus");
    index--;
    $('.slide').eq(index).addClass("focus");
    $("#sliding").css({
      left: $("#sliding").position().left - 144 + "px"
    });
  });
  $("#left").click(function() {

    $('.slide').eq(index).removeClass("focus");
    index++;
    $('.slide').eq(index).addClass("focus");
    $("#sliding").css({
      left: $("#sliding").position().left + 144 + "px"
    });

  });
});
* {
  margin: 0;
  padding: 0;
}
.slider {
  text-align: center;
  direction: rtl;
  width: 1000px;
  border: 2px solid;
  height: 160px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
}
#sliding {
  position: relative;
  margin: 0;
  left: 0;
  transition: all 0.5s linear;
}
.slide {
  transition: all 0.6s ease;
  border: 1px solid;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  margin: 8px;
  background-repeat: no-repeat;
  background-position: 50%;
  display: inline-block;
  background: url(http://i.imgur.com/heDRFUE.jpg);
  box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  -webkit-filter: brightness(50%);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
.focus {
  -webkit-filter: brightness(110%);
  transform: scale(1.2);
  z-index: 10;
  position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
  <div id="sliding">
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>

  </div>
</div>
</br>
<center>
  <button id="right">slide right</button>
</center>
<center>
  <button id="left">slide left</button>
</center>