text next to image

[ashkaan57]

Hi,
I am new to CSS.
I want to have an image (170x250) centered and have some text to the
right of it, starting from top of the image.
I have:

..info
{
position: absolute;
top:100px;
left:200px;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #000000;
word-spacing: normal;
line-height: 10pt;
padding:10
}
..info img {
position:absolute;
top:0;
left:0;
width:170px;
align:center;
padding:10;
float:left;
}

and in html:
<div class="info">
<p><img ...> blah blah blah
</div>

But the text starts from the bottom of the image.

Where am I goofing up?

[meltedown]

as*******@hotmail.com wrote:

Hi,
I am new to CSS.
I want to have an image (170x250) centered and have some text to the
right of it, starting from top of the image.
I have:

.info
{
position: absolute;
top:100px;
left:200px;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #000000;
word-spacing: normal;
line-height: 10pt;
padding:10
}
.info img {
position:absolute;
top:0;
left:0;
width:170px;
align:center;
padding:10;
float:left;
}

and in html:
<div class="info">
<p><img ...> blah blah blah
</div>

But the text starts from the bottom of the image.

Where am I goofing up?

The position absolute in the img style means it will ignore the .info
container.

All you really need is
..info img {float:left;}
<div class="info">
<img ...> blah blah blah
</div>

[ashkaan57]

Thank you meltdown.
if I want to center both the image and the text next to the image and
assign some charactersitics to the blah blah text, do I do:

..info {
float:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #000000;
word-spacing: normal;
line-height: 20pt;
font-weight: 700;
text-align:center;
padding:10
}
..info img {
float:left;
}

This seems to not show part of the image, but when I click on it, it
shows the whole image! Or, whe I keep adding new lines of "blah blah"
the image keeps showing more of the hidden part.

[Steve Pugh]

as*******@hotmail.com wrote:

I want to have an image (170x250) centered and have some text to the
right of it, starting from top of the image.
I have:

.info
{
position: absolute;
top:100px;
left:200px;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 10pt;
Really bad idea. 100% is good but 100% might be 6pt ot might be 26pt
depending on the user's settings, so drop the fixed line-height toa
void problems.
padding:10
10 what?
}
.info img {
position:absolute;
top:0;
left:0;
width:170px;
align:center;
padding:10;
float:left;
}
float and position: absolute; can not be used together like that. See
the CSS spec for details.
and in html:
<div class="info">
<p><img ...> blah blah blah
</div>

But the text starts from the bottom of the image.

Where am I goofing up?

Assuming that your container is variable width (if it's fixed width the
whole things is even easier).

..info {
position: relative;
margin-top: 100px;
}

..info p {
margin-left: 50%;
padding: 1em 1em 1em 90px;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #000000;
background-color: #FFFFFF;
}

..info img {
position: absolute;
left: 50%;
top: 1em;
margin-left: -85px;
border: 1px solid red;
}
<div class="info">
<img src="" alt="" width="170" height="250" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Fusce lacus. Suspendisse potenti. Pellentesque
mauris ligula, faucibus sit amet, sagittis quis, pellentesque at,
magna. Vivamus justo neque, vestibulum vitae, malesuada eget, pharetra
quis, lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque at urna id lectus suscipit malesuada. Nullam est. Donec a sem.
Aenean hendrerit, augue egestas hendrerit iaculis, augue metus dictum
enim, molestie tincidunt dolor magna non quam. Cras est. Proin
facilisis lacus vitae mi.</p>

Image is centered and text appears to the right of the image, and the
tops of both text and image are aligned.

Steve

[Spartanicus]

as*******@hotmail.com wrote:

I want to have an image (170x250) centered and have some text to the
right of it, starting from top of the image.

http://homepage.ntlworld.ie/spartanicus/temp.htm

--
Spartanicus

[meltedown]

as*******@hotmail.com wrote:

Thank you meltdown.
if I want to center both the image and the text next to the image and
assign some charactersitics to the blah blah text, do I do:

.info {
float:left; You want everything in the center, why float the .info container to
the left ? font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #000000;
word-spacing: normal;
line-height: 20pt;
font-weight: 700;
text-align:center; This make the text centered on each line, and it won't do anything to
the image, since the image is floated. padding:10
}
.info img {
float:left;
}

This seems to not show part of the image, but when I click on it, it
shows the whole image! Or, whe I keep adding new lines of "blah blah"
the image keeps showing more of the hidden part.

If you want to center the content, give .info automatic margins.
Then .info will be centered. To limit info to a small area in the
center, give it a limited width:

.info {width:40%;margin:auto}

Here is an example:
http://www.reenie.org/test/test20.htm

[ashkaan57]

Thanks a lot Steve.
I tried your code but:
- the image did not show at all. When I removed the "margin-left:-85px"
it showed up.
- The text shows at the bottom, with some distance between itself and
the image.
I used the sample from Spartanicus' page and it works, although the
text for some reason, starts a little lower than the top of the image
(unlike his sample page).

I sincerely appreciate your assistance and pointing my mistakes to me.

[Steve Pugh]

as*******@hotmail.com wrote:

Thanks a lot Steve.
I tried your code but:
What code? Please quote the parts of the message you are replying to.
- the image did not show at all.
In which browsers? And with which doctype? I tested in IE6, FireFox
1.0.7 and Opera 8.51 with a doctype that triggers standards mode.

It doesn't work in IE5.5 (image overlaps text slightly) but that could
be corrected by feeding IE<6 slightly differnt styles via conditional
comments or any one of a number of CSS hacks.

See http://steve.pugh.net/test/test100.html for my demo.
When I removed the "margin-left:-85px" it showed up.
But then it won't be centered.
- The text shows at the bottom, with some distance between itself and
the image.
If you've removed the margin from the image then there will be all
sorts of things different.
I used the sample from Spartanicus' page and it works, although the
text for some reason, starts a little lower than the top of the image
(unlike his sample page).

Spartanicus' solution is simpler than mine. Use it instead. Are you
using the same doctype he is? If not then doctype sniffing may explain
the vertical alignment differences.

Steve