Spacing between superposed divs, without affecting width

Question

I have been trying recently to make a slide of divs, using a script named Owl-Carousel, where divs are spaced by 10 px each so dragging looks nice.

I made the whole code for showing purpose: http://codepen.io/anon/pen/VLZmWd

I tried modifying the margins without success.

The CSS is as follow:

.generic { // header on top of slide, must have wrapper width
  background-color:red;
  height: 30px;
  text-align:center;
}

.item { // item (slide) inside the owl carousel, must have wrapper width
  height: 300px;
  background-color: #7FFFD4;
  //margin-right:10px; // gives the spacing between slides, but works so bad
}

#wrapper { // wraps carousel and elements with generic class
  margin:0px auto;
  width:720px;
  height: auto;
}

How can I space slides between each other by 10px while keeping red/green areas same width and .generic class untouched.

The reason I want the class ".generic" to be unchanged is mainly the way I've sat up my code, so that the CSS is easily modifiable for widths: I have a lot of different classes/elements which are supposed to take the wrapper width, I wish not to have to set width for each of them or set margins, for code manageability.

EDIT: To make it clear, when using mouse dragging on the carousel, my objective is to see 10px of white between each slide green slide (which isn't the case in the codepen) while keeping the green area width the same as the red area width.

Thanks

Answer 1

Well... i think this is what you want:

http://codepen.io/anon/pen/QbLdpv

$(document).ready(function() {
  $("#owl-demo").owlCarousel({

      navigation : true, // Show next and prev buttons
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem:true,
    afterMove: function (elem) {

      var index = this.owl.currentItem;

     $('.owl-wrapper').css('margin-left',-10*(index)+'px')
    }

 });
});

To get desired behavior, you must move container (.owl-wrapper) - default position is always left:0, but, since we want border - we must move it accordingly. In CSS (if i remember well:)), i've just added:

.owl-item {
   border-right:10px solid white; 


}

EDIT2: margin-left, instead left, now should work in all (modern) browsers. :)

Answer 2

You can apply a margin to your meows and add a container around each of them, which makes them smaller than the total size of the container, adding margin. http://codepen.io/anon/pen/aOopOK

You can also use box-sizing to the same effect if you do not want to change the HTML. http://codepen.io/anon/pen/QbLdbG

However, I would recommend you develop this functionality yourself and don't use owl-carousel, especially if you are just learning JS. It isn't a particularly complex concept, though certainly outside the scope of a stackoverflow answer.