Position relative & overflow hidden

I'm trying to do a simple div switcher with some effect in JQuery but I'm stuck on some CSS issue.

Basicly I have a container with a fixed width of 650px & n divs inside this container that all have variable width.

Since I'm doing a left/right effect I have the container with开发者_开发知识库 overflow: hidden so that I can hide the content of the div when as they are positioned on the left of the screen.

My problem is that as soon as the container is set to overflow:hidden nothing is shown on the screen.

here is my code

<div class="container">
    <div class="somechild">variable height</div>
    <div class="somechild">variable height</div>
</div>

And the CSS

.container{
  position: relative;
  width: 650px;
  overflow: hidden;
}

.somechild{
  position: absolute;
  display: none;
}

thanks

Try this:

.container{
   position: relative;
   width: 650px;
   height: 30px;
   overflow: hidden;
} 

Having display none on the child elements means that the parent div doesn't really contain anything, so it's 0 height. Setting the child elements to visible won't change the height automatically, so you need to set it in your CSS upfront or do it programmatically when you set the child to visible.

I've noticed that you don't have to specify a fixed width/height to get overflow: hidden; to work properly. All you have to do is use display: block; or display: inline-block; and it will work.

Here is example code for a button with a slide-in animation I did for my own project: http://codepen.io/anon/pen/WbgJgm

HTML:

<a href="#"><span>Hello</span></a>

LESS:

a {
  text-decoration: none;
  color: blue;

  span {
    display: inline-block;
    overflow: hidden;
    position: relative;
      z-index: 1;
      padding: 10px 15px;
    border: 1px solid blue;

    &:after {
      content: "";
      position: absolute;
        top: 0; left: -100%;
        z-index: -1;
      width: 100%; height: 100%;
      background: blue;
      -webkit-transition: left 0.1s ease;
      -moz-transition: left 0.1s ease;
      transition: left 0.1s ease;
    }
  }
  &:hover {
    span {
      &:after {
        left: 0;
      }
    }
  }
}