2 pics and a text box

[irukandji]

I’m working on a non-profit site for gratefulpaws.org a no kill dog and cat rescue in South Florida. see the test version http://test.gratefulpaws.org (this version has three divs containing the code to format the pics and text and works)

I have made a div which contains two images and a block of text which can’t be separated into multiple divs do to the CMS system being developed for it.

What I need is the first picture to be left aligned, then I need the text to be padded-right 5 px from the first picture.... then I need the second picture to display underneath the first picture with some space (10-15px). Just as it looks inside the test site.

I’ve spent about three days working with this div alone and have only been able to format it so the text is almost where I need it to be, but it still wraps under the first picture.

I’d love to know what I am doing wrong and how to make it right.

Thanks in advance for any help…

Inside the img src= I have made a “somepad class” and the align-left which seemed to bring most of the text where I need it but not all.

html code:

<div id="f-pic" class="nopad"><img src="cropped/home-featured-pet.jpg" alt="Featured Pet of the Week" align="left" class="somepad"/>My name is Charlie, I am still here. I am told that I am a pretty good looking fella with hazel eyes and a hairy chest. I am lean, trim and quite athletic. I am charming, affectionate, love to give kisses, love to exercise and if you like to bike or jog, I would keep you company and run along side.<p>
I am about 1 1/2 years old and weigh about 60 pounds. I am neutered, up to date on shots, micro-chipped, crate trained and housebroken. Read more>></p>

<img src="cropped/adopt-me.png" alt="grateful paws adopt me link" /></div>

and the CSS code:

#f-pic {
position:relative;
float:left;
width:380px;
height:auto;
margin-top: 20px;
margin-bottom: 10px;
text-align: left;
padding-left: 20px;
}

.nopad {
font-size:12px;
font-family:tahoma;
}

.somepad {
padding-left:5px;
padding-bottom:15px;
padding-right:5px;
}

[Snookerman]

Put the images one after the other:

<div id="f-pic" class="nopad"><img src="http://test.gratefulpaws.org/cropped/home-featured-pet.jpg" alt="Featured Pet of the Week" align="left" class="somepad"/><img src="http://test.gratefulpaws.org/cropped/adopt-me.png" alt="grateful paws adopt me link" />My name is Charlie, I am still here. I am told that I am a pretty good looking fella with hazel eyes and a hairy chest. I am lean, trim and quite athletic. I am charming, affectionate, love to give kisses, love to exercise and if you like to bike or jog, I would keep you company and run along side.
<p> I am about 1 1/2 years old and weigh about 60 pounds. I am neutered, up to date on shots, micro-chipped, crate trained and housebroken. Read more>></p>
</div>
Then add this to your css:

.nopad img {
float:left;
clear:both;
}
You could then increase the bottom padding of the first image to suit your needs.

[irukandji]

Ahhh! You are amazing snookerman. I really fought with this, looked inside a CSS manual and tried the web, but after all that you saved my @$$..

Many many thanks!

[Snookerman]

You're welcome! Remember to go to your first post, edit, go advanced and add the Resolved prefix to the thread title.