Question

I’m trying to do this demo

EDIT — here’s the current situation with placeholders [problem demo][2] — EDIT

for some reason my text is line breaking and then jumping up to inline after the animation is finished. I can’t use the plain ‘div’ because it affects the rest of the page so I’m unsure how to get this thing to work properly.

my code is literally exactly as shown in the demo minus the div display inline block css rule

div {
display : inline-block;
}
.holdingbox {
position: relative;
top: 0;
}
.leftbox {
position: relative;
top: 0;
left:0;
display:inline-block;
}
.rightbox {
position: relative;
display:inline-block;
overflow:hidden;
width:0;
height:30px;
vertical-align:top;
}
.content{
width:100px;
position:absolute;
left:0;
top:0;
}
.box {
margin-left : 5px;
}

​
html is

<div class="holdingbox">
 <span class="leftbox">Stuff</span>
 <span class="rightbox">
     <span class="content">Stuff to reveal</span>
 </span>
</div>
<div class = "box">Text</div>​

and js is

    $('.holdingbox').hover(function(){
    $('.rightbox').animate({width: '90px'}, 1000)
}, function(){
    $('.rightbox').animate({width: '0'}, 1000)
});

Answer 1

Create a new css rule

.inline_block {
display : inline-block;
}

and add it where needed e.g.

<div class="holdingbox inline_block">
 <span class="leftbox inline_block">Stuff</span>
  <span class="rightbox inline_block">
  <span class="content inline_block">Stuff to reveal</span>
 </span>
</div>
<div class = "box inline_block">Text</div>​

This should not affect other divs on the page.