Solved

How to left-align a pic in XHTML + CSS

Posted on 2007-04-06
3
730 Views
Last Modified: 2013-11-19
I want to display an image on my page, and have text "wrap around" the image, with the image on the left side of the text.  I am using XHTML 1.1 Strict.  I have this line in my HTML:
<div id="centerpic"><img src="images/parchment_compass_world_map.jpg" alt="Parchment Map" width="228" height="150"/></div> MY TEXT HERE

and my css reads:
#centerpic {
      text-align: left;
      }      

but this is not working.  The image shows up fine, but text is still going under the image, and I want text to go to the right of the image, wrapped.  If I put MY TEXT HERE inside the DIV tag, it will put the text to the right of the image, but at the very bottom and to the right.  I need the text to begin off the upper right corner of the image, not the bottom right corner.  
0
Comment
Question by:arthurh88
  • 2
3 Comments
 
LVL 4

Accepted Solution

by:
opho earned 500 total points
ID: 18868003
Hey arthurh88....

What you're looking for is

#centerpic {
float:left;
}

You'll probably want to set margin-right: 8px; or however large works for you.

--Steve
0
 
LVL 4

Expert Comment

by:opho
ID: 18868005
Or, actually, (sorry I missed this part) if the picture is to appear on the right side, its

float:right

and you'll want to set margin-left: 8px or so.

--Steve
0
 

Author Comment

by:arthurh88
ID: 18868014
thanks!  thats it
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question