Wed, 2013-12-11 23:13
I am trying to align a picture in the left corner, with a block of text, then with another picture.
-------- text text text --------
| | text text text | |
| Pict | text text text | Pict |
|______|text text text |______|
text text text text text text
text text text text text text
text text text text text text
I have been struggling with this for several days with no joy. Sometimes is works and sometimes it fails by the right picture dropping down and not aligned as it should.
<img class="picture" src="images/Bruce%20&%20Shirley.JPG" width="280" height="185" /> <div class="content"> <div id='bruceJ'>Text is placed here via AJAX</div> </div> <img class="pictureR" src="images/Pumpkin2013.jpg" width="280" height="185"" /> .picture { margin: 10px; float: left; border: 3px solid red; } .content { padding: 10px 1em; margin-left: 10px; margin-top: 0px; } #bruceJ { width: 40em; float: left; } .pictureR { margin-top: 0; margin-left: 1em; float: right; border: 3px solid red; }