Image Alignment Problem

What’s happening here is that browsers now treat images a floating elements by default, wrapping everything around them as they go along.

To force the next part of the page to display below the image, you need to insert <br clear="both"> after the <img…> tag in your post, so that the whole line looks like this.

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Google_Appliance.jpg/140px-Google_Appliance.jpg" alt="" align="left" /><br clear="both">

If you need more information, the Web Design Group has some great references. Here’s what you’ll need about the <img> tag, and they also have some excellent references on HTML 4.0 in general and CSS (Cascading Style Sheets), in case you’re interested in even more control of your web page.

Hope that helps!

—Adam Johnson INDEPENDENTgeek
INDEPENDENTgeekTN.com

Thank you so much! It worked great!

How do I make it so it won’t do it next. Can I put a code in my CSS that will stop it from doing it?

I know I could put this in my style.css

br { clear:both; }

But still I have to keep putting <br /> on my posts every time I have to put an image.

Hmmm… there must be some fault in my template.

Also if you go all the way to the bottom, you can see that it’s not centered. I think I have an OCD and I can’t settle with this.

The part about your posts not being centered is to be expected. Your page is laid out like this:

[logo                                      ]
[                menu1, menu2, menu3, menu4]
____________________________________________
[post                   ][ads              ]
[                       ][                 ]
_________________________[                 ]
[post2                  ][                 ]
[                       ]-------------------
_________________________                  |
[post3                  ]                  |
[                       ]                  |
-------------------------                  |
[footer____________________________________]

So you can see that it’s the column for your posts plus the column for your ads that are centered over the footer.

I’m looking at the rest for you right now.

—Adam Johnson INDEPENDENTgeek
INDEPENDENTgeekTN.com

Okay, here’s the fix:

First, go get rid of those extra line breaks I told you about. Then go into your style.css file and change the post class so that it looks like this:

.post {
	margin: 25px 0 25px 0;
	border-bottom: 2px solid #e3e3e3;
	float: left;
}

Cheers!

—Adam Johnson INDEPENDENTgeek
INDEPENDENTgeekTN.com

Thanks! Worked! Wow!

Thank you so much, CSS Guru.

Another issue. If you scroll down, you’ll see.

Your help is greatly appreciated.

Wait. I just fixed it with:

.post {
	margin: 25px 0 0 0;
	border-bottom: 2px solid #e3e3e3;
	float: left;
        width: 100%;
}

Ha! See, you’re getting it!

Are you using a Mac or PC? I might have a few suggestions for a great pair of apps that make editing this kind of thing a breeze.

—Adam Johnson INDEPENDENTgeek
INDEPENDENTgeekTN.com

I switch between Macs and PCs but I use Notepad++ for my PC.

And Thanks again for your help.

*changes topic to “resolved”*

Cool.

When you’re on your Mac, you should check out a pair of apps (which I actually used to solve this little quandry of yours) called Taco HTML Edit and CSSEdit (both by different companies).

Here’s how the workflow…works:

1. Copy the published webpage’s entire source code to the clipboard.
2. In Taco HTML Edit, create a new document containing only the code from the clipboard.
3. Save the document to a local disk.
4. In CSSEdit, open the locally-saved document in a preview window.
5. In the preview window’s toolbar, click Style Sheets, then select the style sheet to edit.
6. In the drop-down dialog sheet, click the Override and Edit button.

Changes made to the page in CSSEdit instantly are reflected in the CSSEdit preview window. Changes made in Taco HTML Edit need to be saved (?S), and are automatically and instantly refreshed in the CSSEdit preview window.

That’s cool! But I think the Firebug Firefox Add-on does something similar where you can edit the HTML and CSS and shows the changes you have made in the browser. And it’s actually really neat because it’s integrated in the browser.

=)

That’s cool! But I think the Firebug Firefox Add-on does something similar where you can edit the HTML and CSS and shows the changes you have made in the browser. And it’s actually really neat because it’s integrated in the browser.

=)

Right, Firebug will let you edit HTML and CSS (nice find, btw—I’m not a “plugin guy,” usually), but it doesn’t edit the PHP files that run WordPress.