Title: Image/Text Alignment Last modified: August 18, 2016 --- # Image/Text Alignment * [judgemental](https://wordpress.org/support/users/judgemental/) * (@judgemental) * [19 years, 6 months ago](https://wordpress.org/support/topic/imagetext-alignment/) * I am almost at wit’s end with this problem and it really shouldn’t be one that i can tell but it persists. I simply want to put 150px x 150px images on the left hand side of the page with a small text description underneath also on the left hand side of the page. i have tried to place the images with the editor, i have tried doing it with image handler plugin and then adding the text, i have tried to place everything in the post and then alight everything images and text left, but i keep getting this—> [http://judgementalzine.com/zine/index.php/category/thezine/november-06issue-2/](http://judgementalzine.com/zine/index.php/category/thezine/november-06issue-2/) * is there a simple fix to this without having to go in and recode everything by hand, or is it something else? i am working on osx 10.4.8 with firefox(camino and safari all do the same thing as well). is it the template i’m using that could be causing the problem? this seems to be a simple post that i’m trying to do, so i’m not sure why it’s giving me such a hassle. * any help greatly appreciated. cheers! christie Viewing 7 replies - 1 through 7 (of 7 total) * [Ghidra99](https://wordpress.org/support/users/ghidra99/) * (@ghidra99) * [19 years, 6 months ago](https://wordpress.org/support/topic/imagetext-alignment/#post-482435) * I’m looking at the site and don’t see any 150 X 150 images. Can you be more specific? Are you trying to add a sidebar type feature? * [katgirl](https://wordpress.org/support/users/katgirl/) * (@katgirl) * [19 years, 6 months ago](https://wordpress.org/support/topic/imagetext-alignment/#post-482436) * To place an image 150×150 on the left, with text beneath, left hand side: * 1) resize your nov06/cover.jpg to 150×150. Its currently 450×300 (54kb). Most free graphics editors will let you do this. Upload to your image files. * 2) Go to Your Post and insert this: * <`img src="http://yourdomain.com/path to your images folder/nov06/cover.jpg" class="alignleft" /`> * 3) In your style sheet insert this: * .alignleft { width:150px; border:none; height:150px; text-align:left; margin: 0 0 0 5px; padding:0; clear:all; } * To ensure that your images don’t produce a border when used with hyperlinks: * img a {border:none;} * Note: margin:0 0 0 5px; forces the image 5px from the left so that its not squashed up against your left hand margin. * If you want the image on the left, and the text to start on the right and then‘ wrap’ around the image when the text runs past the bottom image margin, insert float:left; in your styling. * I’d also add <`br clear="left" /`> straight after my html just to be sure to clear all floating elements. * Thread Starter [judgemental](https://wordpress.org/support/users/judgemental/) * (@judgemental) * [19 years, 6 months ago](https://wordpress.org/support/topic/imagetext-alignment/#post-482597) * thanks! quick question tho…if i wanted to have a larger image show up at the top like the nov cover and then the small 150px underneath that with the text following can i still use the same code you gave me? and dumb question, but does it matter where in my style sheet i put the code? * regards 🙂 * [katgirl](https://wordpress.org/support/users/katgirl/) * (@katgirl) * [19 years, 6 months ago](https://wordpress.org/support/topic/imagetext-alignment/#post-482609) * Put it wherever you want in the stylesheet, but it makes sense to put it with all image coding for ease of modifying, if necessary. Give it a header so you can locate it easily. * /**IMAGES ***********/ .alignleft { width:150px; border:none; height:150px; text-align:left; margin:0 0 0 5px; padding:0; clear:all; } * img a {border:none;} * A: yes, but you really won’t need to generate new code in the stylesheet for it. Just stipulate your image size in the img HTML like so * ie: <`img src="yourdomain.com/path-to-image" width=300px" height="300px" border ="0" alt="description of image" /`> * Don’t forget a ‘space’ and backslash to close the image tag. * Thread Starter [judgemental](https://wordpress.org/support/users/judgemental/) * (@judgemental) * [19 years, 6 months ago](https://wordpress.org/support/topic/imagetext-alignment/#post-482619) * you rock! thanks 🙂 * Thread Starter [judgemental](https://wordpress.org/support/users/judgemental/) * (@judgemental) * [19 years, 6 months ago](https://wordpress.org/support/topic/imagetext-alignment/#post-482649) * I’d also add
straight after my html just to be sure to clear all floating elements. * sorry but i have another dumb ? after my html where? in my post html? or?…. * [katgirl](https://wordpress.org/support/users/katgirl/) * (@katgirl) * [19 years, 6 months ago](https://wordpress.org/support/topic/imagetext-alignment/#post-482695) * If you use the image tag while writing your post, then you can insert that clearing br / after your image or text. If its inside a template, (ie: hard coded by you) you can do this also. * All the br / tag does is clear floating elements so whatever follows doesn’t float as well. Viewing 7 replies - 1 through 7 (of 7 total) The topic ‘Image/Text Alignment’ is closed to new replies. ## Tags * [align](https://wordpress.org/support/topic-tag/align/) * [alignment](https://wordpress.org/support/topic-tag/alignment/) * [left](https://wordpress.org/support/topic-tag/left/) * [text](https://wordpress.org/support/topic-tag/text/) * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 7 replies * 3 participants * Last reply from: [katgirl](https://wordpress.org/support/users/katgirl/) * Last activity: [19 years, 6 months ago](https://wordpress.org/support/topic/imagetext-alignment/#post-482695) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics