Ohmystinkinheck

Last week’s WordPress Wednesdays tutorial went over the basics of how to center and border images using CSS. This week, as promised, the WW tutorial will be similar; I will demonstrate how to use CSS to assign image borders WHILE justifying images to the left or right and wrapping text around those same images.

Without further ado…let’s get started.

Again, let me remind you that whether or not you choose to edit your stylesheet (style.css) and/or other web files via the WordPress Dashboard or edit using a text editor and then upload to your server via a FTP program, just be consistent. Consistency wards off errors. Trust me on this one.

If you don’t remember, this may be a good time to stop and review how to find the div class that assigns styles to your individual posts as well as where that div class can be found in your theme’s stylesheet.

Got it?

Good - moving forward.

As I showed you last week, the div class in the WW stylesheet (style.css) that assigns styles to individual posts can be found in a bit of code that looks like this:

.post {
	margin-bottom: 50px;
}

And because there were no styles assigned for images before last week’s tutorial, we built the CSS below. This CSS gave us the option of centering an image with a 3 pixel double border or centering an image without a border. And? You were all so enchanted that you immediately went and re-wrote your CSS within your blogs, right? No? Oh well.

                .post img { }

		.post img.center {
			display: block;
			padding: 3px;
			margin: 0 auto 1.5em auto;
			border: 3px double #bbb;
			float: none;
			clear: both;
		}

		.post img.center-noborder {
			display: block;
			padding: 3px;
			margin: 0 auto 1.5em auto;
			border: 0px;
			float: none;
			clear: both;
		}

And again, if you need to review how this works into the actual html image source code you key into your blog’s post, please feel free to do so.

Since I’ve last posted, I’ve changed up the CSS here in OMSHville (whoohooo new design!). Now my image borders are displayed just a tad differently. For the purpose of this continued tutorial, I will be retaining the same CSS that I started with last week, so as not to confuse. If you would like to see this EXACT CSS in action, you can view it in today’s post at WW.

The following CSS will tell a browser to display an image on the left, with or without a border, and with the text wrapped to the right.

                .post img.left {
			padding: 3px;
			margin: 0.5em 15px 0.5em 0;
			border: 3px double #bbb;
			float: left;
			clear: left;
		}

		.post img.left-noborder {
			padding: 3px;
			margin: 0.5em 15px 0.5em 0;
			border: 0px;
			float: left;
			clear: left;
		}

What does it look like in action? It looks like this. Here is a photo of my oldest, who is rather annoyed at all my picture taking.

I pasted in the image code I’ll show you in a bit, assigning class=”left” for the style. See how nicely the text wraps the image on its right?

Per the CSS above, there is padding and margins outside of the image. The padding is the distance between the image and the border. The margin is the distance between the outside of the border and the text wrapping the image.

Remember, the border displayed above is not what is shown on this site (I have a single border since the redesign.), but it is what is displayed at today’s post at WW.

The final part of the CSS is to left-justify the image.

The html code to assign this CSS looks like this:

<img class="left" src="http://farm3.static.flickr.com/2170/1505619878_b4244e924c_m.jpg" width="160" height="240" alt="That's SO NOT Funny" />

But what if I don’t want a border? Easy enough, I just make sure that I assign class=”left-noborder” inside the image tag.

This ensures that browsers will not add any border at all to the image, because as you see in the CSS above, I’ve assigned a border of 0 pixels.

There is still the same amount of padding and margin, but if desired the padding could certainly be reduced since there isn’t an actual border assigned any longer. I tend to keep it assigned for consistency.

The image is still left-justified and the clear property is assigned to make sure that no floating elements are allowed on the left side of the image.

I don’t particularly like this effect on photographs, but it serves well for graphics that look better without a border, like this one.

The html code to assign this CSS looks like this:

<img class="left" src="http://farm3.static.flickr.com/2170/1505619878_b4244e924c_m.jpg" width="160" height="240" alt="That's SO NOT Funny" />

The following CSS will tell a browser to display an image on the right, with or without a border, and with the text wrapped to the left.

                .post img.right {
			padding: 3px;
			margin: 0.5em 0 0.5em 15px;
			border: 3px double #bbb;
			float: right;
			clear: right;
		}

		.post img.right-noborder {
			padding: 3px;
			margin: 0.5em 0 0.5em 15px;
			border: 0px;
			float: right;
			clear: right;
		}

It is basically the exact opposite of the CSS above that justifies images left.

And that’s it.
No really, THAT IS ALL.

You can paste these directly below last week’s code in your stylesheet if you want to full around with them. Change the colors, change the pixels on the border, personalize it and make it yours. That is the greatest part of CSS … the options are seemingly endless.

Like I mentioned last week, you can easily add these styles to any images uploaded to your WordPress via the upload feature. You simply upload the image(s) and add the style class the same exact way I did above into the image source. NO MATTER WHERE you pull the image from (flickr, free photo storage sites, etc..) you can assign any class assigned within your blog’s stylesheet.

If I’ve been unclear about anything, please let me know in the comments and I’ll try to clarify.

11 Responses to “WordPress Wednesdays: Wrap Text Around Images Using CSS”

1. WordPress Wednesdays » Blog Archive » Wrap Text Using CSS!

   [...] images within your blog WITHOUT USING TABLES, then you will want to check out today’s post, WordPress Wednesdays: Wrap Text Around Images Using CSS”, over at Oh My Stinkin’ Heck. You can learn how I’ve wrapped text around this image of [...]

2. BOSSY

   Wrap text around wha? You mean the photos don’t have to float against the column border like that, all unconnected? Who knew? Proves once again you rock the CSS.

3. Angella

   Can you just come here and fix everything FOR me? That would be swell.

   No?

   Sigh.

   Guess I’d better get off my arse and do it myself ;)

4. Just Beachy

   Teacher, I might need a little extra help cause, “I ain’t got no stinkin’ .post in my CSS.” this is what I have:
   #left_side img {
   float: none;
   padding: 3px;
   background: #fff;
   border: 1px solid #454545;
   margin: 15px 8px 15px 0px;
   }

   I think my .post is: #left_side .mpart {
   padding: 40px 0 0 0;
   }

   But, I’m not so sure?

5. Just Beachy

   Dawg… it cut out my Cheech accent.

6. Serene and Not Herd

   I’m a little unclear if you are only editing the style.css, or if you are also applying tags to the images.

   Can you clarify?

   Thanks!

7. Louise

   Oh my goodness. I had seen you comment on other blogs but had never clicked over to check you out. What was I thinking?? You are amazing, and exactly what a girl like me needs when entering this blogging world. An endless resource. Fabulous. Ah, Thanks. I have a lot to learn.

8. Steph

   I should have read this BEFORE writing my post today. :headdesk:

9. OMSH

   HEY! I see your questions. I am going to answer your questions! Give me a few hours!

   Dang! What! Is! With! These?!!!!!!!!!!

10. OMSH

    Just Beachy - Sorry for the delay, but look - you figured it out! Smart chica!

    Serene and not herd - You have to edit the stylesheet and you have to add the class to your image source when you upload or paste it in.

11. Serene and Not Herd

    I had to beat down my stylesheet, and modify the css names for the items, but I got it working. One of my newest posts at http://www.sereneandnotherd.com shows off this great tool.

    So others may learn from my lesson, add the class=”left-noborder” into your tag. Applying it to a tag that contains the image won’t do it. For example: