/    Sign up×
Community /Pin to ProfileBookmark

Need help with positioning 2 images & 3 paragraphs w/CSS

Here’s the page I’m working on: [URL]http://www.melspetpals.com/about.php[/URL]

I’ve got an image that I’ve got positioned at the left-top of three paragraphs and I want another image positioned at the right-bottom of the three paragraphs.

If you look at the page you can see that the upper left image is positioned fine. It’s the bottom right image that I’m having trouble with. For the upper left image I’m using float: left, so I figured after three paragraphs all I should need to do to get the bottom of the other picture even with the last line of the third paragraph is to use float: right on that image.

WRONG!

I’ve tried using clear: (both/left/right) in various places. I’ve tried putting things in div tags. I’ve spent over an hour on this and can’t get it right.

How can I get that second picture wrapped by the third paragraph and the bottom of the image even with the bottom of the third paragraph?

Here’s the markup for those images and the paragraphs on that page:

[code=html]<h2>About Mel</h2>
<img src=”images/daisyMel150px.jpg” style=”float: left; padding-right: 10px; padding-bottom: 10px;” />
<p>I have been passionate about animals since I was a young child. Throughout my life I
have often rescued lost dogs and cats – not to mention a few wild animals along the way! I have also been a loving mother to
both cats and dogs, and a little robin named IckleBickle Robin, that I raised from hatchling to young adulthood. I currently
have two pet pals of my own; a dog (Daisy) and a cat (Nick).</p>
<p>I have been a volunteer with the Minnesota Valley Humane Society for over 6 years. During this time, I have had the pleasure
of working with many dogs of all sizes, breeds, and temperaments while they have been guests at our shelter. However, I love to
work with all kinds of animals and look forward to having that opportunity with Mel’s Pet Pals. And, yes, I am an avid fan of Animal
Planet!</p>
<p style=”clear: both;”>My goal is to provide you, the owner, with a choice that allows you to spend more time loving your pets and less time
worrying about them while you are away. As a former corporate employee, I know what it is like to worry about my pets while I am
away on business or working late at work to finish a task or project. Finding someone who will love your pets as much as you do,
and provide them with the quality of care you feel is adequate, is a real concern. Mel’s Pet Pals was designed to give you peace
of mind while you are away and to keep your pets happy until you can come home.</p>
<img src=”images/NickFeathers.png” style=”float: right;” /> [/code]

Thanks in advance for anyone’s help!

to post a comment
CSS

3 Comments(s)

Copy linkTweet thisAlerts:
@ray326Sep 15.2008 — Well you could put

float:left;

width:70%;

on that last paragraph.
Copy linkTweet thisAlerts:
@CentauriSep 15.2008 — Unfortunately, there is no method of automatically doing this, as a float can only be referenced to its top. Any attempt at shoving the imaging back up with relative positioning or negative margins will not work either, resulting in overlapping text.

A compromise will have to be sought here, and one such compromise could be to place the image before the last paragraph:[CODE] <img src="images/NickFeathers.png" style="float: right; margin: 0 0 10px 10px">
<p style="clear: [COLOR="Red"]left[/COLOR];">My goal is to provide you, the owner, with a choice .....[/CODE]

or you could try the "sandbag" method where both the images are defined at the top, but the right image is spaced down using a narrow floated element above it - the clear on the last paragraph would need to be removed for this :[CODE] <img src="images/daisyMel150px.jpg" style="float: left; padding-right: 10px; padding-bottom: 10px;" height="153" width="140">
<div style="float: right; width: 1px; height: 10.1em;"></div>
<img src="images/NickFeathers.png" style="float: right; padding: 10px 0 10px 10px; clear:right;">
<p>I have been passionate about animals since I was a young child.....[/CODE]
Copy linkTweet thisAlerts:
@capella07authorSep 23.2008 — I know I'm a looooooooooong time in replying, but I figured at least if someone has a similar problem and does a search and comes across this thread, there'll be a solution!

Your first suggestion, Centauri worked - I just put the image tag before the p tag and used the margin settings you showed (0 0 10px 10px). Positioned perfectly!

Thanks a lot!
×

Success!

Help @capella07 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...