2 replies [Last post]
bruceaj
bruceaj's picture
Offline
newbie
Last seen: 9 years 8 weeks ago
Timezone: GMT-5
Joined: 2013-12-11
Posts: 3
Points: 5

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;	
}

bruceaj
bruceaj's picture
Offline
newbie
Last seen: 9 years 8 weeks ago
Timezone: GMT-5
Joined: 2013-12-11
Posts: 3
Points: 5

HTML was stripped

The HTML was stripped from my message. Delete the above message and I'll try to submit again.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi bruceaj, Try putting the

Hi bruceaj,
Try putting the Right image first and not floating the content.