Position text below image

Forum Moderators: not2easy

Message Too Old, No Replies

Position text below image

calmseas

6:15 pm on Jan 1, 2011 (gmt 0)

In the following snippet, the text displays below the image for monitor display resolutions of 1024X768 or less. At higher resolutions, the text displays to the right of the image. Am rendering with IE. How does one display the text below the image at all resolutions?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">

</style>
</head>

<body>
<img src="../images/mylogo.gif" >
<p class=testclass >
Now is the time for all good men to come to the aid of their country.
</body>
</html>

incrediBILL

6:25 pm on Jan 1, 2011 (gmt 0)

I'm no CSS guru, but I think this might be what you want:

img {
margin: 2px;
border: 2px solid #009cff;
height: auto;
width: auto;
float: left;
text-align: right;
}

calmseas

7:56 pm on Jan 1, 2011 (gmt 0)

The text still appears to the right of the mylogo.gif image, rather than under the image at resolutions greater than 1024 X 768.

incrediBILL

8:05 pm on Jan 1, 2011 (gmt 0)

OOPS! I read it wrong, thought you wanted it right instead of always bottom (blush)

Remove the "float" attribute which is designed to make text wrap around an image.

img {
margin: 2px;
border: 2px solid #009cff;
height: auto;
width: auto;
}

calmseas

12:24 am on Jan 2, 2011 (gmt 0)

Excellent............thank you.