html - positioning image nearest to absolute positioned div -

i have following html

<div id="someid">     <img src="" />     <div class="someclass"></div> </div> <div id="other"> </div> 

and following css

#someid{position: relative;} .someclass{position: absolute; left: 100px; width: 100px; height: 100px; background-color: red;} img{floa/t: left; background-color: blue; width: 100px; height: 100px;} #other{width: 100px; height: 100px; background-color: green; position: relative;} 

i don't need image floated left. demo

the green-background div should go below. demo working in chrome want not in mozilla firefox.

this possible without float:left;, i'm not sure whether need absolutely positioned div.

note: without absolute div

#someid {     position: relative; } .someclass {     position: relative;     display:inline-block;     width: 100px;     height: 100px;     background-color: red; } img {     /*float: left;*/     display:inline-block;     background-color: blue;     width: 100px;     height: 100px; } #other {     width: 100px;     height: 100px;     background-color: green;     position: relative; } 

for firefox

they ignore width , height, therefore need change display block level element, applied.

unable set width/height img when doctype set (firefox)

demo

edit: absolute positioned div

demo