Question

I have a little function that toggles my content from the left to the right with a sliding effect. Unfortunately the two div objects (with inline-block) due to their size don’t align next to each other when sliding, but one of them is obviously always beneath the other one.

See the jsfiddle code here

I tried the following:

• setting a float:left didn’t help at all
• positioning the divs absolute, which helped but also created some unexpected behaviour when sliding from the right to the left (try it yourself)
• delaying/queueing the animations, works but not really user-friendly with the delay

I also want to mention that floats and different positioning aren’t very helpful when you want your objects all centered, so I’d prefer another solution anyway.

Maybe you guys got an idea, how I could make this smooth, so that the divobjects stay in one line ?!

Answer 1

Did a lot of changes, sorry about that, but try this:

http://jsfiddle.net/jcZ6J/9/

Also note, that you should not place a div inside an a tag.

HTML

<div class="content">
  <a href="index.php?show=camp" class="container" data-title="camp"><h2>CAMPS<br />149 &euro;</h2></a>
  <a href="index.php?show=course" class="container" data-title="course"><h2>COURSES<br />49 &euro;</h2></a>

  <div class="slider-viewport">
    <div class="slider-carriage">
        <div id="camp" class="show" title="left"><span>CAMP-INFO</span></div>
        <div id="course" class="show" title="right"><span>COURSES</span></div>
    </div>  
  </div>
</div>

---

JS

$(function() {
    $('.container').click(function(evt) {
        evt.preventDefault();
        $('.slider-carriage').stop(false, false).animate({
            left: (-100 * $('#' + $(this).data('title')).position().left / $('.slider-viewport').width()) + '%'
        }, 1000);
    });
});

little update here so that resizing the window is not a problem

---

CSS

@charset "utf-8";

body {
    color: #FFF;
    background-color:#09F;
    font-family: "Arial";
    font-size: 14px;
    margin: 0px;
}

/* CONTENT */
.content {
    width:100%;
    text-align:center;
}

.container {
    text-align: center;
    display: inline-block;
    border: 2px solid #FFF;
    background:rgba(0,0,0,0.5);
    width:180px;
    margin-left:10px;
    margin-right:10px;
    padding-top:20px;
    margin-top:95px;
}

.container:hover {
    border:2px solid #CCC;
    color:#0F0;
}

.slider-viewport {
    position: relative;
    overflow: hidden;
    width: 90%;
    margin: 50px auto;
    height: 20px;
}

.slider-carriage {
    position: absolute;
    width: 200%;
}

.show {
    float: left;
    text-align: center;
    background: #F90;
    width: 50%;
}

.show > span {
    display: block;
    border: 2px solid #FFF;
}