Question

I’m trying to create a slider that I can shift left and right. I only want 3 slides to show, so I set the container’s width to the width of each inner slide * 3 and set overflow:hidden. Shouldn’t the fourth slide be hidden then? Then later I can just animate the container to have a margin of -110px so slides 2-4 show.

http://jsbin.com/welcome/27336/edit

HTML:

<div class="container">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
  <div class="inner">shouldn't be here</div>
</div>

CSS:

.container { width: 330px; overflow:hidden; background:#e6e6e6; }
.inner { width: 110px; background: orange; float:left; }

How it renders:

Answer 1

How about setting the height of the elements:

.container { 
    width: 330px; 
    overflow:hidden; 
    background:#e6e6e6; 
    height:20px 
}

.inner { 
    width: 110px; 
    background: orange; 
    float:left; 
    height: 20px;
}

The container’s height adjusts with the inner elements, that’s why you see the fourth element