html - Weird img shifting when using jQuery slideDown and slideUp -

i've following html structure:

<div class ='profilename'>    <hr>    <span class='name'>content</span> </div> <div class ='profile'> <div class='floatrightimg padded'> <img src='imgurl' class='shadow'/>     </div>     <p>description</p> </div> 

with following css linked:

hr { color: #cccccc; }  .floatrightimg { float: right; }  .profile { height: 450px; width: 700px; margin: auto; }  .profilename { width: 700px; margin: auto; }  .shadow { box-shadow: 10px 10px 5px #888888; }  .padded { padding: 0 30px 0 15px; }  .name { background-color: #ffffff; color: #cccccc; left: 70px; padding: 0 8px; position: relative; top: -20px; font-weight: bold; font-size: 20px; }  .name:hover { cursor:pointer; } 

and i'm using following jquery function:

$(document).ready(function(){              $(".name").click(function(){                 var tobeslided = $(this).parent("div").next("div");                 if(tobeslided.is(":visible")) {                     tobeslided.slideup();                 } else {                     tobeslided.slidedown();                 }             });          }); 

everything working want (sliding down-showing- , up-hiding- content of 'profile' div when click on 'name' span. problem noticed weird effect: floating image perform weird shifting when close div , down when open div. in other words, doesn't remain fixed while showing or hiding content (as matter of fact, part of content hided/showed). possible explanation behavior? in advance.

here jsfiddle

it's because of p element next float right. http://jsfiddle.net/6k2wv/3/

<div class ='profilename'>    <hr>    <span class='name'>content</span> </div> <div class ='profile'>     <div class='floatrightimg padded'>         <img src='http://www.polpenuil.it/convenzioni/images/smile.jpg' class='shadow'/>     </div>     <p style="float: left;">description</p> </div> 

note new float left.

also, can simplify js code as:

$(document).ready(function(){     $(".name").click(function(){         var tobeslided = $(this).parent("div").next("div");         tobeslided.slidetoggle();     }); }); 

it's best practice avoid stringing .parent/.next calls. end confusing code depends on specific dom structure. instead, give element unique class , select directly outside of event.

$(function(){     var smileyface = $(".smiley-face");     $(".name").click(function(){         smileyface.slidetoggle();     }); });