Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to align an image next to a paragraph

Tags:

html

css

Something like this...

[img here ] [ Paragraph here ]

instead of what I have now.

[img here ]

[ Paragraph here ]

HTML

   <p> <div class="polaroid">
     <img src="Me1.jpeg" title="Me" alt="Me" align="left" />
    <p class="polo">That's Me!!!</p>
       </div></p>
    </div>

    <div class="blocker03">
    <p class="description">
 blah blah blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah
  blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah
    blah   blahblah blahblah blahblah blahblah blah</p>
    </div>

CSS

.blocker03 {
 width:470px;
 padding-left:60px;
 margin:0 0 10px 25px;
 font-size:12px;
 display:inline-block;
  }

.polaroid {
postion: relative;
float: right;
border: 3px solid #C6930A;
border-style:dotted;
background: #66594C;
width: 140px;
padding: 5px;
margin: 5px;
text-align: center; 
-moz-box-shadow: 1px 1px 3px #222;
-moz-transform: rotate(-5deg);
-webkit-box-shadow: 1px 1px 3px #222;
-webkit-transform: rotate(-5deg);
box-shadow: 1px 1px 3px #222;
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
    } 
like image 932
AppSensei Avatar asked Sep 17 '12 21:09

AppSensei


2 Answers

so thats some sloppy code you have there, but check out this jsfiddle for an example using float:

http://jsfiddle.net/tH2qc/

And here's something loosly based on your code:

http://jsfiddle.net/zZkpw/

like image 180
Zach Lysobey Avatar answered Oct 12 '22 23:10

Zach Lysobey


Isn't this all a bit overkill when this will work fine:

<p><img src="*[your image]" align="right" valign="middle" vspace="5" hspace="5"/>[your text]</p>
like image 22
andy_dodd Avatar answered Oct 12 '22 23:10

andy_dodd