You need the div stretch along the height of the image. Fun with position doesn't help

 <div style="border:1px solid #000;"> <img src="http://hashcode.ru/upfiles/logo.png" align="right"> sometext </div>

    4 answers 4

     <div style="border:1px solid #000;"> <img src="http://hashcode.ru/upfiles/logo.png" align="right"> sometext <div style="clear:both"></div> </div>

    But here it is more careful with clear:both : it still needs to be properly processed, and then the design can go.

    • Well, thank you. - ikoolik

    This is normal behavior, equivalent to:

     img{ display: block; float: right; }

    As an option:

     <div style="border:1px solid #000;"> <div id="pic1"></div> sometext </div> #pic1{ background-image: url('http://hashcode.ru/upfiles/logo.png'); background-repeat: no-repeat; background-position: right; height: 70px; }
    • I know. The question is how more elegantly to avoid it. - ikoolik

    This requires that both the picture and the block itself be, how to say it correctly :), in one thread, this is what I did:

     <div style="border:1px solid #000;float:left;width:100%;"> <img src="http://hashcode.ru/upfiles/logo.png" style="float:right;" align="right"> sometext, sometext, sometext, sometext, sometext, sometext, sometext, sometext, sometext, sometext </div>

      that is, you want to say that you need the top of the text to coincide with the top of the picture? if so then everything is all right, look at the picture http://hashcode.ru/upfiles/logo.png there is a lot of white space above because of this, the height is greater, and it turns out that the top of the text and the picture are the same

      • @Horus Re-read the question. And then again. Sample code is given in general. By the way, the answer has already been received and the answer is accepted. - ikoolik