Title: Image Alignment Problem Last modified: August 19, 2016 --- # Image Alignment Problem * Resolved [miniimage](https://wordpress.org/support/users/miniimage/) * (@miniimage) * [17 years, 6 months ago](https://wordpress.org/support/topic/image-alignment-problem-2/) * I am having problems with image alignment and it’s bothering me. * For some reason it does not align in the div it is in which is the post div. * And the problem is that the image itself is aligning in the whole content div. * To see what I mean please see my blog. * [http://clubpenguinlounge.com/](http://clubpenguinlounge.com/) Viewing 15 replies - 1 through 15 (of 15 total) * [adamjohnson](https://wordpress.org/support/users/adamjohnson/) * (@adamjohnson) * [17 years, 6 months ago](https://wordpress.org/support/topic/image-alignment-problem-2/#post-908735) * 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 `
` after the `` tag in your post, so that the whole line looks like this. * ```
``` * If you need more information, the Web Design Group has some great references. [Here’s what you’ll need about the `` tag](http://www.htmlhelp.com/reference/html40/special/img.html), and they also have [some excellent references on HTML 4.0 in general](http://www.htmlhelp.com/reference/html40/) and [CSS (Cascading Style Sheets)](http://www.htmlhelp.com/reference/css/), in case you’re interested in even more control of your web page. * Hope that helps! * —Adam Johnson INDEPENDENTgeek [INDEPENDENTgeekTN.com](http://www.independentgeektn.com) * Thread Starter [miniimage](https://wordpress.org/support/users/miniimage/) * (@miniimage) * [17 years, 6 months ago](https://wordpress.org/support/topic/image-alignment-problem-2/#post-908793) * 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? * Thread Starter [miniimage](https://wordpress.org/support/users/miniimage/) * (@miniimage) * [17 years, 6 months ago](https://wordpress.org/support/topic/image-alignment-problem-2/#post-908830) * I know I could put this in my style.css * `br { clear:both; }` * But still I have to keep putting `
` on my posts every time I have to put an image. * Hmmm… there must be some fault in my template. * Thread Starter [miniimage](https://wordpress.org/support/users/miniimage/) * (@miniimage) * [17 years, 6 months ago](https://wordpress.org/support/topic/image-alignment-problem-2/#post-908831) * 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. * [adamjohnson](https://wordpress.org/support/users/adamjohnson/) * (@adamjohnson) * [17 years, 6 months ago](https://wordpress.org/support/topic/image-alignment-problem-2/#post-908851) * 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](http://www.independentgeektn.com) * [adamjohnson](https://wordpress.org/support/users/adamjohnson/) * (@adamjohnson) * [17 years, 6 months ago](https://wordpress.org/support/topic/image-alignment-problem-2/#post-908854) * 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](http://www.independentgeektn.com) * Thread Starter [miniimage](https://wordpress.org/support/users/miniimage/) * (@miniimage) * [17 years, 6 months ago](https://wordpress.org/support/topic/image-alignment-problem-2/#post-908856) * Thanks! Worked! Wow! * Thank you so much, CSS Guru. * Thread Starter [miniimage](https://wordpress.org/support/users/miniimage/) * (@miniimage) * [17 years, 6 months ago](https://wordpress.org/support/topic/image-alignment-problem-2/#post-908860) * Another issue. If you scroll down, you’ll see. * Your help is greatly appreciated. * Thread Starter [miniimage](https://wordpress.org/support/users/miniimage/) * (@miniimage) * [17 years, 6 months ago](https://wordpress.org/support/topic/image-alignment-problem-2/#post-908862) * Wait. I just fixed it with: * ``` .post { margin: 25px 0 0 0; border-bottom: 2px solid #e3e3e3; float: left; width: 100%; } ``` * [adamjohnson](https://wordpress.org/support/users/adamjohnson/) * (@adamjohnson) * [17 years, 6 months ago](https://wordpress.org/support/topic/image-alignment-problem-2/#post-908864) * 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](http://www.independentgeektn.com) * Thread Starter [miniimage](https://wordpress.org/support/users/miniimage/) * (@miniimage) * [17 years, 6 months ago](https://wordpress.org/support/topic/image-alignment-problem-2/#post-908890) * I switch between Macs and PCs but I use Notepad++ for my PC. * And Thanks again for your help. * *changes topic to “resolved”* * [adamjohnson](https://wordpress.org/support/users/adamjohnson/) * (@adamjohnson) * [17 years, 6 months ago](https://wordpress.org/support/topic/image-alignment-problem-2/#post-908907) * 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. * Thread Starter [miniimage](https://wordpress.org/support/users/miniimage/) * (@miniimage) * [17 years, 6 months ago](https://wordpress.org/support/topic/image-alignment-problem-2/#post-908908) * 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. * =) * Thread Starter [miniimage](https://wordpress.org/support/users/miniimage/) * (@miniimage) * [17 years, 6 months ago](https://wordpress.org/support/topic/image-alignment-problem-2/#post-908909) * 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. * =) * [adamjohnson](https://wordpress.org/support/users/adamjohnson/) * (@adamjohnson) * [17 years, 6 months ago](https://wordpress.org/support/topic/image-alignment-problem-2/#post-908962) * 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. Viewing 15 replies - 1 through 15 (of 15 total) The topic ‘Image Alignment Problem’ is closed to new replies. ## Tags * [align](https://wordpress.org/support/topic-tag/align/) * [image](https://wordpress.org/support/topic-tag/image/) * [img](https://wordpress.org/support/topic-tag/img/) * [template](https://wordpress.org/support/topic-tag/template/) * [Themes](https://wordpress.org/support/topic-tag/themes/) * 15 replies * 2 participants * Last reply from: [adamjohnson](https://wordpress.org/support/users/adamjohnson/) * Last activity: [17 years, 6 months ago](https://wordpress.org/support/topic/image-alignment-problem-2/#post-908962) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics