jquery - how to make an expanded div, that contains half text and half image/photogallery, to work properly? -

i trying create "read more" text button, succed in creating it, have problems when try split in 2 parts -> half text , half image/photogallery ( article of newspapper - left text, right image ) http://jsfiddle.net/nn3uz/6/ . should change code work propper expectaction ? ps: can see dimensoin of main div not working well, ther no contour text before cliking reed more... , should change there border ? html

<p id="title">math</p> <div class="expander" id="aspect">                 <div id="paragraf">                 paragraph 2: excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est                  laborum. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est excepteur sint occaecat                  cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est excepteur sint occaecat cupidatat non proident, sunt in c                 ulpa qui officia deserunt mollit anim id est                  </div>     <div id="image"><img src=""></div>         <div id="clear"></div>         </div> 

css

#title {  border:1px solid #800000;  width:1000px;  background:#800000;  color:#fff;  margin-left:0px;  font-size: 30px;  }  #aspect { width:1000px; border: 1px solid #800000; background:#fff; box-shadow: 5px 5px 5px #494949; padding-left:10px; }  #paragraf { margin-right:10px; width:500px;     float:left; }  #image {     width:400px;     height:200px;     background:blue;     float:left; }  #clear {    clear:both; } 

i know there no problem javascript implemented, there wrong html or css overflowing or whatever called problem.

add overflow:auto #aspect

#aspect {     width:1000px;     border: 1px solid #800000;     background:#fff;     box-shadow: 5px 5px 5px #494949;     padding-left:10px;      overflow:auto } 

demo