Images

No idea on plugins, but this works:
https://www.tamba2.org.uk/wordpress/graphicalcss/align/index.html

Does it? Seems a little confusing to me. Or is just because its getting late.

Both ??

It does work, I use that technique a lot on my page, and people have posted here that it does work.

I followed the tutorial and my image still looks like the image on the 1st step.

Ok this is my CSS file:


/*CSS document*/

/* commented backslash hack v2 */
html, body{
height:100.1%;
margin:0;
padding:0;
}
/* end hack */
html, body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
}

/* general body elements */
a {
text-decoration: none;
color:#804040;
}

a:hover {
color:#b37200;
}

img {
padding: 10px;
}

/* contains all the page elements */
#container {
position: relative;
width: 100%;
min-height: 100%;
}

* html #container {height:100%}

#inner {width:100%;padding-top:20px;padding-bottom:77px}/*clear the footer*/

/* clearer element */
.clearer {
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both;
}

/* header element */
#header {
height: 70px;
background-image: url(/images/bg2.png);
background-repeat: no-repeat;
margin-top: 1%;
margin-right: 127px;
margin-left: 131px;
position:relative;
border: 1px solid #000000;
background-color: #ffb200;
}

/* IE hack */
* html #header { width: 745px; }

/* Navigation elements*/
#nav {
padding: 10px;
margin-right: 10px;
margin-left: 20%;
width: 610px;
}

ul#nav {margin:0 0 0 10%;padding:5px}

#nav li {
padding-left:15px;
padding-top: 15px;
padding-bottom: 15px;

}

li#home { background: url(/images/home_tiny.png) no-repeat 20px;
}
li#contract { background: url(/images/mail_tiny.png) no-repeat 20px;
}
li#about { background: url(/images/about_tiny.png) no-repeat 20px;
}
li#blog { background: url(/images/blog_tiny.png) no-repeat 20px;
}
li#work { background: url(/images/work2.png) no-repeat 20px;
}
li#admin { background: url(/images/admin_tiny.png) no-repeat 20px;
}

#nav li {
height: 60px;
margin: 0;
display: inline;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}

#nav a {
line-height: 14px;
font-weight: bold;
margin: 0 0px 0px 40px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}

#nav a.active, #nav:hover {
color: #804040;
}

#nav a:hover {
color: #804040;
}

/* Content element */
#content {
margin-right: 1%;
margin-left: 15%;
margin-top: 20px;
margin-bottom: 30px;
height: 100%;
width: 48%;
float:left;
display:inline;
padding: 15px;
border: 1px solid #CCCCCC;
line-height: 20px;
}

/*#content li {
list-style-type: none;
margin-left: -20px;
background: url(/images/medBullet.png) no-repeat left;
padding-left: 25px;
color:#999999;
font-size: 14px;
}*/

/* archive within Content */

#archive {
border-bottom: 1px solid #cccccc;
}

#archive li{
list-style-type: none;
margin-left: -20px;
background: url(/images/medBullet.png) no-repeat left;
padding-left: 25px;
color:#999999;
font-size: 12px;
}

#archive a {
color:#999999;
}

#archive a:hover {
color:#b37200;
}

/* archived cat within Content */

#archivedCat {
border-bottom: 1px solid #cccccc;
}

#archivedCat li{
list-style-type: none;
margin-left: -20px;
background: url(/images/medBullet.png) no-repeat left;
padding-left: 25px;
color:#999999;
font-size: 12px;
}

#archivedCat a {
color:#999999;
}

#archivedCat a:hover {
color:#b37200;
}

/* archived author within Content */

#archivedAuth {
/*border-bottom: 1px solid #cccccc;*/
}

#archivedAuth li{
list-style-type: none;
margin-left: -20px;
background: url(/images/medBullet.png) no-repeat left;
padding-left: 25px;
color:#999999;
font-size: 12px;
}

#archivedAuth a {
color:#999999;
}

#archivedAuth a:hover {
color:#b37200;
}

/* archived month within Content */

#archivedMon {
border-bottom: 1px solid #cccccc;
}

#archivedMon li{
list-style-type: none;
margin-left: -20px;
background: url(/images/medBullet.png) no-repeat left;
padding-left: 25px;
color:#999999;
font-size: 12px;
}

#archivedMon a {
color:#999999;
}

#archivedMon a:hover {
color:#b37200;
}

/* Slogan element within Content */
#slogan {
color: #b37200;
font-size: 18px;
font-weight: bold;
}

/* linebreak within Content */
.linebreak {
height: 1px;
}

/* byline within Content */
.byline {
font-size: 12px;
font-style: italic;
color: #999999;
}

/* title styles within Content */
.title {
color: #804040;
font-size: 14px;
font-weight: bold;
}

.title a{
color: #804040;
}

.title a:hover{
color:#b37200;
}

.archiveTitle {
color: #804040;
font-size: 12px;
font-weight: bold;
}

/* Article element within Content */
.articleTitle a {
background-image: url(/images/article_icon.png);
background-repeat: no-repeat;
background-position: left;
padding-left: 35px;
line-height: 20px;
color: #804040;
font-size: 14px;
font-weight: bold;
}

.article {
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin-bottom: 20px;
}

.more-link {
font-style: italic;
text-align: right;
}

.articleAuthor {
color: #999999;
font-size: 10px;
}

.archiveDate {
color: #999999;
font-size: 10px;
}

.category a{
background-image: url(/images/category_small.png);
background-repeat: no-repeat;
background-position: left;
padding-left: 25px;
line-height: 20px;
color: #666666;
font-size: 12px;
}

.category a:hover{
color:#b37200;
}

/* updated element within Content */
#updatedBox {
padding-bottom: 60px;
background-image: url(/images/line.png);
background-repeat: no-repeat;
background-position: 50% 50px;
}

.updated {
background-image: url(/images/calender_small.png);
background-repeat: no-repeat;
background-position: left;
line-height: 20px;
padding-left: 35px;
margin: 10px;
}

/* view Comment element within Content */

#commentBox {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
}

.viewComment {
background-image: url(/images/comments_small.png);
background-repeat: no-repeat;
background-position: left;
padding-left: 25px;
line-height: 20px;
}

.addComment {
background-image: url(/images/speech_small.png);
background-repeat: no-repeat;
background-position: left;
padding-left: 25px;
line-height: 20px;
color: #000000;
}

/* comments class */
#commentBG {
background-image: url(/images/commentBG.png);
background-repeat: no-repeat;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
}

.postComment {
background-image: url(/images/speech_small.png);
background-repeat: no-repeat;
background-position: left;
padding-left: 25px;
line-height: 20px;
margin-top: 30px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
}

.comment {
color: #666666;
font-size: 10px;
}

.commentAuthor {
color: #b37200;
font-size: 10px;
}

/* sidebar elements */
#sidebar {
float:right;
height: 100%;
margin-right:90px;
padding-left: 15px;
padding-top: 10px;
width: 200px;
color: #000000;
margin-top: 5%;
font-size: 10px;
/*border: 1px dotted #cccccc;*/
padding-right: 20px;
}

/* IE hack */
* html #sidebar { width: 200px; }

.sidebarHeader {
font-weight: bold;
color: #993300;
background: url(/images/bigBullet.png) no-repeat left;
height: 60px;
padding-left: 20px;
}

#sidebar li {
list-style-type: none;
margin-left: -20px;
background: url(/images/bullet.png) no-repeat left;
padding-left: 14px;
color:#999999;
font-size: 10px;
}

#sidebar a {
color:#999999;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}

#sidebar a:hover {
color:#b37200;
}

#articleList li {
list-style-type: none;
margin-left: -20px;
background: url(/images/bullet2.png) no-repeat left;
padding-left: 14px;
color:#999999;
font-size: 10px;
line-height: 10px;
}

/* definition list element within Sidebar element */

/* calender elements for archive section within Sidebar element */
#calender {
font-size:10px;
color: #999999;
padding-top: 10px;
padding-bottom: 10px;
}

#calender a{
font-size: 10px;
font-weight:bold;
color: #804040;
}

#calender thead {
font-size:12px;
border: none;

}

#calender thead a{
font-size: 12px;
border: none;
}

/* footer element */
#footer {
font-size: 10px;
position: relative;
padding: 10px;
margin-top:-77px;
margin-right: 127px;
margin-left: 131px;
height:40px;
line-height:15px;
text-align: left;
}

#footer a {
color: #999999;
}

#footer a:hover {
color: #b37200;
}

/* form elements */
.mediumBox {
width: 350px;
height: 50px;
}
.wideBox {
width: 350px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.textArea {
width: 350px;
height: 150px;
}
.button {
width: 100px;
margin-top: 15px;
}

form dd {
margin: 0;
}

form dl {
line-height: 25px;
}

form dt {
font-weight: bold;
}

/* icon elements */
.icon {
margin: 10px;
}

#navIcons {
padding: 0 0 0px 0px;
margin-right: 60px;
margin-left: 62px;
border: 1px dashed #666666;
}

#navIcons li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}

/* elements from the Admin/login */
.error {
color: #804040;
padding-left: 25px;
background-image: url(/images/warning_small.png);
background-repeat: no-repeat;
background-position: left;
}

#sorry {
color: #804040;
font-weight: bold;
}

/* elements for the thank you page*/
.zone {
padding: 40px;
background-image: url(file:///C|/Documents%20and%20Settings/Owner/images/mail.png);
background-repeat: no-repeat;
background-position: 220px 2px;
text-align: center;
background-color: #FFFFFF;
}

.moblog {
float: left;
padding: 2px;
}

/* element for blog */

#summary {
border-bottom: 1px solid #cccccc;
}

/* definition list */

dt {
font-weight: bold;
color: #993300;
}

dd {
color: #999999;
margin-left: 0px;
display: block;
}

dt a {
font-weight: bold;
color: #993300;
}

dd a {
color: #999999;
display: block;
}

/* about elements */
#aboutSkills {
border-bottom: 1px solid #cccccc;
}

#aboutSkills li{
list-style-type: none;
margin-left: -20px;
background: url(/images/medBullet.png) no-repeat left;
padding-left: 25px;
color:#999999;
font-size: 12px;
}

#aboutSoftware {
border-bottom: 1px solid #cccccc;
}

#aboutSoftware li{
list-style-type: none;
margin-left: -20px;
background: url(/images/medBullet.png) no-repeat left;
padding-left: 25px;
color:#999999;
font-size: 12px;
}

#aboutSite {
/*border-bottom: 1px solid #cccccc;*/
}

.commentsTitle {
padding-left: 25px;
padding-bottom: 5px;
color: #804040;
background: url(../images/comments_small.png) no-repeat left -4px;
font-size: 12px;
font-weight: bold;
border-bottom: 1px solid #cccccc;
}

#services {
/*border-bottom: 1px solid #cccccc;*/
}

#services li{
list-style-type: none;
margin-left: -20px;
background: url(/images/medBullet.png) no-repeat left 10px;
padding-left: 25px;
padding-bottom: 5px;
padding-top: 5px;
color:#999999;
font-size: 12px;
}

strong {
color: #000000;
}

#comments {
list-style-type: none;
}

#comments li {
padding: 10px 35px;
margin-left: -40px;
margin-bottom: 6px;
border-bottom: 1px solid #ccc;
background: url(../images/speech_small.png) no-repeat 0px 20px;
}

div.clearer1 {
clear: left;
line-height: 0;
height: 0;
}

div.cent {
text-align: center;
}

.img-shadow {
clear: both;
float:left;
margin: 20px 0 0 17px !important;
margin: 20px 0 0 8px;
}

I didn’t include the other elements because I didn’t think I needed them. All I want to do, is insert an image in the post and have it look like:

https://www.simplebits.com/notebook/2004/12/17/ie5.html

This is the post

<img src=”https://www.nicktoye.co.uk/wordpress/wp-content/joss.jpg&#8221; width=”163″ height=”200″ alt=”Joss Stone” />
At the age of 29 I have decided to go back to school. Having already been armed with a degree in Media and Business, I have decided to pursue a degree in Multimedia Design. As we speak I am awaiting the arrival of the application form, but my excitement is almost overflowing.

Having recently been married, and with plans to start a family, I feel I need this degree to secure a more promising future. As I have been almost completely self-taught with regards to web design, I believe that this degree will be essential in fulfilling my ambitions of being a creative director of either my own company or a major design house.

Stay tuned to see how my progress develops.

Can you see where I am going wrong.

Adding a float to your IMG tag is the easiest way:

<img src="https://www.nicktoye.co.uk/wordpress/wp-content/joss.jpg" width="163" height="200" alt="Joss Stone" style="float:left;" />

That line would put the image on the left side of the post, and text would flow around it. Change left to right to put the image on the right instead.

The 2nd easiest way is to add a pair of classes to your CSS that define float:left; and float:right;, then using the class in your IMG tag instead of a style declaration like above.

Ok so this is my post image tag

<img class=”image-right” src=”https://www.nicktoye.co.uk/wordpress/wp-content/joss.jpg&#8221; width=”163″ height=”200″ alt=”Joss Stone” />

and these are the style’s i’ve added to my css

#image-right {
float: right;
}

#image-left {
float: left;
}

That doesn’t seem to work though, although when I did the style inline it did work.

Nevermind got it to work, although now my image starts higher than my text, but i’m sure thats not a problem.

Give your floats a padding-top:5px; line then, to line up the top of the image with the top of the text. You’ll need to experiment with the number of pixels though to find the right value.

Much obliged sir.