Placing div2 when the content is bigger than the size of div1

Question

I try to render a page on mobile with responsive css. I can't change the html, and i try to resolve my problem only with css.

Imagine that i have a div like that :

#example {
   width : 25px;
   height : 25px;
}

Inside this div, i have an 1024*768 image. So the content is bigger than the contener (and i will show all the content) My problem is that the following content will be placed at 25px of the top, not below the image.

EDIT : a new jsfiddle, more precise : http://jsfiddle.net/eABu5/12/

Do you have any idea ? Many thanks

Answer 1

LIVE DEMO

CSS

#example {
   width : 250px;
   height : 250px;
   background-color : #123456;
}

#pic {
   margin-top: 250px;
   float: left;    
}


#under {
   margin-top: 10px; 
   float: left;
}