CODEWITHSUNDEEP
csshtmlposition
user2847948
user2847948

Reputation: 149

How to position to the left of text

I have searched for an answer to my question but haven't found one; or maybe I did but just to "green" to know it. I have tried webdesign.about.com/positionins, So You Want Positioning, Huh(HTML Goodies) I want to position an image to the left of my text. Do I need a div for the image? Thanks in advance.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Image Practice</title>

    <link href="css/final-practice.css" rel="stylesheet" type="text/css" />
</head>
    <h1> This is an image example.</h1>
    <body>

        <p class="description">This is an example of an image stuck in the middle of HTML paragraph tags of type. <span>&#40See ppt-images-color.pdf in folder Downloads>lecture-01.&#41</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software</p>
        <p img class="wrap-right" src="images/blank-square.png" alt="Example of an image in middle of text" /p>
</body>
</html>

CSS Code:

html {
    margin: 0;
    padding: 0;
    }

body { 
    font-size: 76%; 
    background-color: #ffc;
}

h1 {
  font-weight: bold;
  font-size: 32px;
  color: #000;

}
p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    clear:both;
}

span{
    font-size:12px;
    font-weight:bold;
    color:#780000;
    }

p.wrap-right {
              position:relative;    
              float:left;
              width:32px;
              height:32px;
}

Upvotes: 0

Views: 67

Answers (2)

Tim
Tim

Reputation: 4101

Your image tag isn't valid in your code snippet.

You have: <p img

It should be <p><img

Upvotes: 0

DaniP
DaniP

Reputation: 38252

First at all you have invalid Html here :

<p img class="wrap-right" src="images/blank-square.png" alt="Example of an image in middle of text" /p>

It must be :

<p> 
<img class="wrap-right" src="images/blank-square.png" alt="Example of an image in middle of text"/>
</p>

And to make the image inside p go to the left try this on your CSS:

p {
 text-align:left;
}

Upvotes: 1

Related Questions