Solved

Text does not wrap around the image

Posted on 2016-08-16
5
51 Views
Last Modified: 2016-08-16
I have created the following page:

http://www.sonoma.edu/exed/pmcp/test-agile-project-management-certificate-course.html

It is looking the way I want, except that the text in the second paragraph does not appear where I want it to. It is appearing on the line below the image creating a big space. I would like it to appear to the left of the image, i.e., wrapping around it, instead of below it. What should I do to get it to appear correctly?

Thanks.
0
Comment
Question by:geeta_m9
  • 2
  • 2
5 Comments
 
LVL 56

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41758269
Your image is in a floated div - take it out of there and place it at the start of your <p> - then remove the div that contained it.

You should end up with something like this
 <h1>Agile Project Management Certificate</h1>
<p><img height="165" style="float: right; margin: 0 0 20px 20px;" src="images/agile.jpg" alt="agile.jpg" />
In the fast-paced business world of the 21st century, some opportunities may be missed with carefully pre-planned traditional project management practices. Rapid development and deployment of both physical and intellectual products requires a more aggressive approach, a more flexible approach, a more agile approach.</p>
<!-- REMOVED
<div style="float: right; width: 240px" class="right">
<img height="165" style="float: right; margin: 0 0 20px 20px;" src="images/agile.jpg" alt="agile.jpg">
</div> -->

Open in new window

0
 
LVL 2

Expert Comment

by:Martin Andrews
ID: 41758270
Remove the float rights from your image and put a width and float left on your paragraph tag
0
 

Author Comment

by:geeta_m9
ID: 41758291
Hi Julian,

Your recommendation worked great. Here is what the page looks like now:

http://www.sonoma.edu/exed/pmcp/test-agile-project-management-certificate-course.html

I also commented out the <div style="clear: both";></div> on line 63, to get rid of the  blank lines after the second paragraph and before the "Quick Links" box on the right.
0
 

Author Closing Comment

by:geeta_m9
ID: 41758318
Thank you.
0
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41758487
You are welcome.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

733 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