force an element to be drawn to the right

<div id="div1">
    <img id="img1" src="1.jpg" />
    <img src="2.jpg" />
    <img 开发者_如何学运维src="3.jpg" />
    <div style="float:none;clear:both;"></div>
</div>

img { float:left; width:150px; height:100px; } 
#div1 { overflow:hidden; width:200px; height:100px; }

I have 3 images and, as you can guess, the second one doesn't fit fully at the right. Instead of being drawn partially, it draws from the new line (but since overflow: hidden we don't see it).

So, how can I force the second image to be drawn to the right of the first image, instead of being drawn from the new line?

Try using img{display:inline} instead of float. Or you can embed them in ul and li and float them.

Done it like that:

<div id="div2">
<div id="div1">
        <img id="img1" src="1.jpg" />
        <img src="2.jpg" />
        <img src="3.jpg" />
        <div style="float:none;clear:both;"></div>
        </div>
</div>

img{float:left;width:150px;height:100px;    } 
#div1{width:450px;height:100px;} 
#div2{width:200px;height:100px;}