here's a Working Fiddle Tested on: IE10, IE9, IE8, IE7, FF, Chrome, Safari
FYI: I also fixed the 100% width issue you had in the inner1 div images. (it was caused by the ul-li default margin)
HTML: (removed your clear:both;
div)
<div id="outer">
<div id="inner1">
<ul>
<li>
<img src="http://placekitten.com/50/50" />
</li>
<li>
<img src="http://placekitten.com/50/50" />
</li>
<li>
<img src="http://placekitten.com/50/50" />
</li>
</ul>
</div>
<div id="inner2">
<img src="http://placekitten.com/50/50" />
</div>
</div>
CSS:
* {
padding: 0;
margin: 0;
}
#outer {
border: 1px solid red;
position: relative; /* new */
}
#inner1 {
width: 30%;
border: 1px solid blue;
display: inline-block; /*instead of the floating*/
}
ul {
list-style-type: none;
}
#inner1 img {
width: 100%;
}
#inner2 {
border: 1px solid green;
width: 60%;
position: absolute;
top: 0; /* stretchs from the beginning of the parent .. */
bottom: 0; /* ..to the end. */
right: 0; /*instead of float:right */
}