CSS Drive forums | 2pics and a text block inside one DIV

2pics and a text block inside one DIV

Posted: 19 December 2008 12:50 PM

[ Ignore ]

Newbie

Total Posts: 2

Joined 2008-12-19

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 here. (this version has three divs containing the code to format the pics and text and works)

I have 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)

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

Profile

svampola

Posted: 16 March 2009 08:18 PM

[ Ignore ] [ # 1 ]

Newbie

Total Posts: 17

Joined 2009-03-09

If I understood you well you want something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#okvir {
position:relative;
border: #000000;
width:400px;
height:400px;
background:#cccccc;
}

img.slika1 {
border:#000000;
background:blue;
position:absolute;
top:5px;
left:5px;
}
img.slika2 {
border:#000000;
background:green;
position:absolute;
top:110px;
left:5px;

}
p.tekst {
position:absolute;
top:5px;
left:110px;
width:200px;
float:top;

}
</style>
</head>

<body>
<div id="okvir">
<img class="slika1" src="" alt="slika1" width="100" height="100">
<img class="slika2" srv="" alt="slika2" width="100" height="100">
<p class="tekst">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. <br/>
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.<br/>
I would keep you company and run along side.<br/>
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>
</body>
</html> 

Profile

‹‹ css alignment issues. Content shifted down in IE8 only when uploaded to server ››