AcademiaSTEMHumanitiesAgriculture & FarmingSocial Sciences

How to Align Images in CSS & HTML

Updated on September 15, 2014

Graphics Layout Help for Newbies

Want to align an image on a web page? Need side-by-side graphics and text? This page should solve your basic graphics and HTML questions.

I wrote this tutorial many years ago, when all webpages had to be written from scratch using HTML code to assign paragraphs, images, fonts, and everything else.

Nowadays, sites like Hubpages, Blogger and Wordpress give us an easy text editor and do all the coding for us. But every now and then, we still need to crack out the HTML and write the code for ourselves.

Tip: Print out my HTML Graphics Cheat Sheet with most of the codes and tricks on this page!

How to Say "Place an Image Right Here!" on a Webpage

HTML puts hidden codes in webpages that mark which parts are text, images, or links. These codes are tucked in between brackets <> which your web browser knows are meant for its eyes only.

Before we can align an image, we need an image! Upload your picture to a free image host like Photobucket or your own website, if you have one. Then find the image's URL (on Photobucket, it's the "Direct Link"; on Picasa, click "Embed Image", then "Image Only - no link".)

Once you have an image's URL, use the following HTML code to say, "place the image here":

<img src="http://www.example.com/image.jpg">

Replace the part in quotes with the URL of your image.

But That's Not Enough, Because...

That HTML code places a graphic, but there's no alignment commands. Without them, the graphic is going to stick up above your text as if it's a really, really enormous letter.

For example, look at how the text is behaving here:

Here's the code that created that mess:

My cat likes to help my friend Lynne when she is basting a quilt. My cat is an expert quilt-holder. She sprawls like this: <img src="http://www.example.com/cat-picture.jpg"> and holds down the fabric. The downside, of course, is cat fur on the quilt. Lynne says that's breaking it in.

Do you see how the web browser is treating the image like a great big huge letter that sticks up above the rest of the text, shoving down the sentence surrounding it? That's almost never useful.

Aligning Images Left or Right

To fix this problem, you could put the image in its own paragraph with nothing to its left or right (except maybe another image):

<p><img src="[URL]"></p>

The other option is to tell the web browser to push the graphic all the way to the left or right, and make the text fill in NEXT to it, as the cat graphic to the right is doing here.

This is the code you need to align an image to the right:

<img src="http://www.example.com/graphic.jpg" style="float: right; margin-left: 5px; margin-bottom: 5px;">

(The unbolded parts are optiona.)

What's all that gobbledygook mean? Let's break it down.

  • <img ... > is the placeholder for an image.
  • src="..." tells the web browser where the image's data is stored or uploaded (its location, its URL).
  • style="..." style tells the web browser to expect a special set of codes called CSS (never mind what that is) which explain how you want the image to be displayed: its size, its layout, whether it has a border, and so on. Styles can also be added to set text colors, sizes and fonts. If HTML is the main chassis of the car, styles tells the web browser about the car's paint job and whether it comes equipped with bluetooth or cup holders.
  • float: right; means push the image as far to the right as it will go. If there's already something there (the sidebar, another floated image), then this image will squeeze in just to the left of that. This is how you tile images side by side. You can also float: left; to make images behave just like the letters of this paragraph: they'll start at the left-hand margin, then tile from left to right across the column until they run out of room, then they flow onto the next line.
  • margin-left and margin-bottom are optional. They add a little bit of an empty border (px means "pixels") to the left and under the image so things aren't mashed right up against it. If you have floated an image to the left, you should probably include a margin-right to add padding there.

VERY IMPORTANT: TO TURN OFF "FLOAT", use the following command:

<p style="clear: both;">

Why would you want to do that? Well, if an image is floated all the way to the right or left, whatever you write after that will attempt to fill in around it. For example, the text above above filled in around that cat picture.

If you don't want the following paragraph to fill in next to the floated object, then you need to use the clear command to draw an invisible horizontal line across the page that says "everything after this has to start on a new paragraph, below the floated image(s)."

HTML Code For Turning a Graphic Into a Link

You know how to make a link like this one, right?

Link to my Jackie Robinson article

HTML Code:

<a href="javascript:hpLoadLink('article',4032946, '', '')">Link to my Jackie Robinson article</a>

in other words, <a href="link goes here">clickable text</a>

makes a link in HTML code.

That's a text link. The web browser will let you put an image in place of the clickable text!

Like this:

<a href="destination-URL"><img src="imageURL"></a>

or like this, if the image has some kind of style set to fine-tune it:

<a href="destination-URL"><img src="imageURL" style="align: left; margin-right: 10px; margin-bottom: 10px;"></a>

How to Center an Image or Headline

The easiest way to center a graphic (or any text) is to put this around it:

<p align=center><img src="imageURL"></p>

which makes a paragraph -- including a blank line after it -- containing the image.

This is the old-fashioned way, and it still works.

Code gurus say we're supposed to do it this way:

<img src="imageURL" style="margin: 0 auto;">

Why? Because about ten years ago, the code gurus realized that HTML (the stuff in brackets) should be for THINGS, like image or paragraph, while CSS (the style="blah" stuff), should be HOW TO DISPLAY THE THING.

The problem is, Internet Explorer is a dinosaur, and it didn't learn how to do auto-margins until IE9. I think most people have upgraded to 9 now, so you should probably use the "correct" code now.

HTML Code to Center a Caption Under an Image

Sorry, code gurus. I'm stuck in 1999, and this still works.

<p align=center><img src="imageURL"><br>Caption Goes Here</p>

<br> is a line break.

The caption can include a link:

<p align=center><img src="imageURL"><br><a href="LinkURL">Clickable Text</a></p>

A cat picture. This is the internet, after all.
A cat picture. This is the internet, after all.

How to Add Captions Under Aligned Images

Earlier, I showed you how to center a caption under a centered image using HTML. But here's the layout trick I use most often: a caption under a graphic that's left- or right-aligned!

The trick is that web browsers think of paragraphs as box-shaped areas. By default, they're the width of a whole column, but you can make them narrower. Then you can lay them side-by-side.

A box (paragraph) can contain anything: images, text, you name it! Including captions.

So what if I want to make an image all the way to the right, with a caption? Here's the HTML code to make that happen:


<p style="float: right; width: 200px; margin-left: 5px; margin-bottom: 5px; text-align: center: font-size: 8pt;"><img src="imageURL" style="width: 100%;">Caption goes here</p>

Write a bunch of text here. It'll fill in to the left of the floated-paragraph.


Let Me Explain How That Works

Say WHAT?

Let's take it slow.

  • <p style="...">Stuff</p> This is the paragraph's container. The "Stuff", in this case, is the image plus its caption.
  • width: 200px; The paragraph's width in pixels. Make the paragraph width the same width as the image in pixels. Alternatively, you could specify the paragraph width by em -- the width of the letter m -- or in %, the width of the column. (In that case it's best to use the same units with the margins; see below).
  • float: right; pushes the paragraph all the way to the right.
  • the optional margin commands put a little whitespace to the left and below the paragraph's bounding box, so whatever's next to it will give it a little room.
  • text-align: center; ensures that the caption is centered under the image.
  • font-size: is optional, but I like to make it 9pt, a bit smaller than body text tends to be.

Notice that I made the image's style=command specify that its width is 100%. 100% of what? The paragraph containing it. Because the image is going to shrink or stretch to match the width of the paragraph containing it, there won't be any room for the caption beside the image, so that forces the caption below the image.

If necessary, in the image's style-code, you may also want to give the image itself a margin-bottom: 5px; or something of the sort to push the caption down a wee bit and not have it so snug against the image's bottom.


Are you trying to put a photo credit under an image, and you need the caption to include a clickable link? Then, in the "caption goes here" area, do the following: <a href="LinkURL">Clickable text goes here</a>


All of the above works just the same if you want the image and its caption on the left. Just change to float: left; and change margin-left to margin-right

How to Scale / Resize an Image - Style Its Width or Height

Your web browser can scale images to different sizes.

The old way is to specify an image's dimensions in pixels:

<img src="imageURL" style="width: 250px; height: 400px;">

That's great. But nowadays, people may be viewing a webpage on an itsy bitsy smartphone or a ginormous computer monitor, and they have completely different numbers of pixels!

That means we have to be clever. Instead of using pixels as our units, we should use a unit that will shrink or grow in scale with the whole page.

That means PERCENT (of the column) or EM (width of the letter em).

<img src="imageURL" style="width: 25%;">

<img src="imageURL" style="width: 10em; height: 3em;">

Percent works best for side-by-side layouts.

But because the actual webpage scrolls off the top and bottom of your screen, the vertical dimension is a little tricky to specify in percentages. That's when I start using ems instead. An m is an m, even if it's turned 90 degrees.


Fancy Stuff: CSS Background-Images

With CSS style: background-image, any image can be tiled as the background for any webpage element. We usually use this trick with paragraphs, but it also works for lists, headers, etc.

Here's the code:

<p style="background-image: url(imageLocation); padding: 1em; color: white;">

padding and color are optional. Color is font color. Padding puts some space between the edge of the text and the borders of the paragraph (em means the width of the letter "m"; you could also specify the padding in px, pixels.)

Unfortunately, background images often make it hard to read text. Sometimes even changing the color of the text (see code below) doesn't help.

Sometimes you only want the backgroun image to tile in one direction. Inside the style="..." command, you can add the following:

  • background-repeat: repeat-x; (tile horizontally)
  • background-repeat: repeat-y; (tile vertically)
  • background-repeat: no-repeat; (if you don't want the image to tile).

Amazon Spotlight: Learn CSS the Easy Way - I got this book for my Mom

CSS: The Missing Manual (Missing Manuals)
CSS: The Missing Manual (Missing Manuals)

When my Mom set up a blog to share her K-12 educational resources, she needed to learn how to build webpages. She already knew a few basics -- headers, paragraphs, links and images-- but her website needed more.

After examining all the books on web design in Buns &amp; Noodle, I purchased this book for her to get her started. It worked! It taught her CSS (dressing up webpages, layout, techniques like side-by-side paragraphs and text). She still uses it as a reference guide.

 

Please share and/or rate this page if you found it useful!

© 2008 Ellen Brundige

Guestbook

Submit a Comment

  • profile image

    Heidi 9 months ago

    You are a wealth of information. Thank you so much for posting all this great information for a beginner like me.

  • profile image

    Emerson Carvalho 12 months ago

    Excelent!

  • profile image

    Irfan Shaikh 15 months ago

    excellent article! very useful. Thnx

  • profile image

    Claudia Thompson 16 months ago

    On your section about putting a caption under aligned text....

    Where you have this:

    You made a mistake here:

    center:

    instead of

    center;

    I know this because I just tried it LOL!

  • Syeda Zainab profile image

    kashif 2 years ago from Rawalpindi, Pakistan

  • TTGReviews profile image

    TTGReviews 2 years ago

    @Jackie What do you mean be "doesn't link to anything"?

    Also, this is a good resource for amateurs in the webpage design field to get to know some of the basics of HTML formatting, but it only touches on CSS formatting.

  • profile image

    Jackie 3 years ago

    Not my favorite tutorial, very confusing. The part on how to make the image a link? Well first of all your "How to Make an Image a Clickable Link" doesn't link to anything, secondly you say "You know how to make a link like this one, right?" but what if I don't know how? Please don't assume you know what I do know, and what I don't know!

  • tammywilliams09 profile image

    tammywilliams09 4 years ago

    Great work! Easy to follow. Thanks.

  • LaptopLeader profile image

    LaptopLeader 4 years ago

    Thanks for the info. It was very useful for me. :)

  • Snakesmum profile image

    Jean DAndrea 4 years ago from Victoria, Australia

    Have added this page for future reference, as HTML and CSS are not my strong points.

    Thanks for writing it. :-)

  • PaigSr profile image

    PaigSr 4 years ago from State of Confussion

    I found one that I want to try right away. Others that will be added in later. Thanks.

  • profile image

    Margot_C 4 years ago

    Your tips work great. I've used a couple and they've always worked exactly as advertised. Thanks.

  • profile image

    1800loanstore 4 years ago

    thanks, i've been trying to figure out how to position my elements for a while now.

  • SouthernSailor profile image

    SouthernSailor 4 years ago

    This page has helped me sooooooooooooo much. Thanks a million for the easy to understand basic instructions that should get anyone off and running with HTML.

  • Snakesmum profile image

    Jean DAndrea 4 years ago from Victoria, Australia

    Wish I'd found this a long time ago - would have made it so much easier to align images on a site.

  • Art Inspired profile image

    Art Inspired 4 years ago

    Thanks for sharing your knowledge and helping others. Make it a great day!

  • profile image

    anonymous 4 years ago

    Thanks mate. Very resourceful post for everyone with little knowledge on HTML. Thanks once again.

  • XHTMLJunction LM profile image

    XHTMLJunction LM 4 years ago

    I am very happy to read this article! Thanks for giving us this useful information. Fantastic walk-through. I appreciate this post.

  • Felicitas profile image

    Felicitas 4 years ago

    Thanks. I've only used one of your tips so far and it's already helped.

  • profile image

    mishraashish 4 years ago

    Great article and very helpful. Thank you so much!

  • profile image

    iortizvictory 4 years ago

    I really like how you put this together. The imagery is fantastic! Thanks for the great resource!

  • profile image

    anonymous 4 years ago

    Wow, this is really helpful. I'm in middle school and we are learning about HTML Coding and I wanted to learn about images. Thank You Greek Geek

  • mythphile profile image
    Author

    Ellen Brundige 5 years ago from California

    @applejacking: Yep. This article was written in 2007, although I've updated it a bit, and my HTML/CSS knowledge goes back to the days of hand-coding everything.

    Sites like Blogspot, Wordpress and Squidoo let us use some codes but not others, and sometimes override our codes with theirs. It takes a little experimentation to figure out what works on different third party publishing sites.

    Unfortunately Squidoo just completely changed the layout of this site today and introduced a ton of layout glitches; now we're all running around fixing HTML and CSS trying to repair the mess!

  • profile image

    applejacking 5 years ago

    Thanks so much. I think it's bit little different with CSS code for Wordpress or Blogspot platform.

  • oddobjective profile image

    oddobjective 5 years ago

    Great info...definitely bookmarked.

  • profile image

    MakeHairBows 5 years ago

    Thank you very much for easy and simple to follow instructions. This has helped me a lot.

  • profile image

    windblowertm 5 years ago

    Great article and very helpful. Thank you so much!

  • Judith Nazarewicz profile image

    Judith Nazarewicz 5 years ago from Victoria, British Columbia, Canada

    Such an awesome resource! Thanks :-)

  • Totus Mundus profile image

    Totus Mundus 5 years ago

    This has saved me a lot of time, thank you.

  • profile image

    sibiana 5 years ago

    Great resource, liked and bookmarked

  • Spletni Delavec profile image

    Spletni Delavec 5 years ago

    Great. I will come back :)

  • profile image

    anonymous 5 years ago

    Thank you:) your explanation helped me a lot.

  • profile image

    ZionAmal 5 years ago

    Wow , well written :)

    Really helped me a lot

  • profile image

    dellgirl 5 years ago

    I am so glad I found this again, I've Liked this before. It is so helpful and informative. You really make it easy to understand and apply, I'm definitely going to try some of these. Thank you for sharing this excellent resource. *Blessed by a SquidAngel*

  • profile image

    violet-sky-39 5 years ago

    So helpful lessons...

  • profile image

    anonymous 5 years ago

    Your lessons are really helpful.

  • mythphile profile image
    Author

    Ellen Brundige 5 years ago from California

    @anonymous: Different websites have different options.

    On Squidoo, we have to use CSS. We can get the code auto-generated for us if we use a tool like the "item box builder" on Squidtools.com, but we still wind up having to paste in the CSS codes.

    If you build your own blog with software like Wordpress, it will automated the process for you, so you just have to upload pictures and type the captions. Again, the CSS is actually added to your webpage -- CSS is the set of commands that tell web browsers how to display things on the page -- but it's hidden from your view by most blogging software.

    Sorry, I'm a little tired and not sure if that made sense!

  • profile image

    anonymous 5 years ago

    Is there anyway to add captions below Html images without the help of CSS ?

    Please help !

  • Wendy Leanne profile image

    Wendy Leanne 5 years ago from Texas

    I had to stop back by today for a refresher on how to make my image clickable. Thanks.

    *~blessed~*

  • ctmom1 profile image

    ctmom1 5 years ago

    Thank you, just what I needed. Off center pictures were making me crazy. Found exactly what I needed here! Bookmarked!

  • TheBLU26 profile image

    TheBLU26 5 years ago

    I've been relying on this a lot! Thank you so much for this intuitive and helpful tutorial! Much appreciated!

  • Srena44 profile image

    Srena44 5 years ago

    great info thanks for sharing

  • AstroGremlin profile image

    AstroGremlin 5 years ago

    @mythphile: It does make sense, Greekgeek. The right click is the key. Thanks so much!

  • mythphile profile image
    Author

    Ellen Brundige 5 years ago from California

    @AstroGremlin: The media library should work! You can upload it anywhere; the key is that you need to be able to right-click on the uploaded image to get its exact URL, which you'll then plug into the codes in the examples above.

    I hope that makes sense!

  • AstroGremlin profile image

    AstroGremlin 5 years ago

    OK this is totally swell, Greekgeek. I have a question about how to call up an image stored on a web site. You shared this "open sesame" command Let's say that I have a WordPress blog on my own domain. Where would I "park" an image to make sure the command finds it? In the Media Library or ?? I hope you will reply. Your wisdom astounds.

  • profile image

    mouse1996 lm 5 years ago

    Great information. Very useful and helpful.

  • profile image

    anonymous 5 years ago

    Exactly the tips I was looking for - thank you so much for sharing!!

  • MrMojo01 profile image

    MrMojo01 5 years ago

    I've used HTML for years but am still struggling with CSS. Thanks for the article!

  • mythphile profile image
    Author

    Ellen Brundige 5 years ago from California

    @AdeelAthar LM: No widget, I'm just putting these codes in a text module. Don't forget to click save.

    If that's what you're doing, then I don't know what's wrong, sorry!

  • LaurisB LM profile image

    LaurisB LM 5 years ago

    I've been trying to figure all this stuff out. This is so helpful! Thank you.

  • sunny saib profile image

    sunny saib 5 years ago

    very useful.. thanks

  • cgbroome profile image

    cgbroome 5 years ago

    Thanks for all the info. Now I've got to go learn how to put it into practice!

  • mythphile profile image
    Author

    Ellen Brundige 5 years ago from California

    @anonymous: I'm so sorry I wasn't able to help -- hopefully you've found the answer by now! My glitchy guestbook wasn't letting me view the code that you're using, so I can't troubleshoot.

    It is sometimes possible that a blog or website's built-in styles will override any formatting you try to do manually.

  • profile image

    coetzeevictor 5 years ago

    Great and useful tutorial. Very informative and easy to understand

  • Totus Mundus profile image

    Totus Mundus 5 years ago

    Your tutorials are just too good!

  • profile image

    Ben Z98 5 years ago

    Thanks! Now I'm another step ahead in writing my website

  • profile image

    anonymous 5 years ago

    Appears to be great info but it doesn't change the position of my pic no matter what I do. Is it because the person that designed my CSS sheets that way .

    Right now I type

    and if I put the etc... it doesn't change anything. Any thoughts

  • simoza01 lm profile image

    simoza01 lm 5 years ago

    Just some of the tips I was looking for .. thanks so much ...

  • profile image

    jillian22 5 years ago

    Very useful - I will come back to it often for reference. How to Write an App

  • profile image

    ravedid 5 years ago

    Well explained just what was needed - Great tips Thank You

  • Louidam1 LM profile image

    Louidam1 LM 5 years ago

    Thank you for these tips!

  • profile image

    GilliansCloud 5 years ago

    Wow, I'll definitely be back to review all this. I was wondering how to have better picture placement in the modules. Thank you :)

  • mythphile profile image
    Author

    Ellen Brundige 5 years ago from California

    @LynetteBell: That's complicated enough that I wound up making a separate tutorial... see if this helps (linking right to the code template):

    https://owlcation.com/stem/how-to-align-images-sid...

    If you don't need links, just take the part out. And you can increase the width from 180 pixels if you want; just make sure you increase the width of the paragraphs AND the images the same amount.

  • magictricksdotcom profile image

    magictricksdotcom 5 years ago

    Thank you. Especially like the instruction on how to credit Creative Commons images under a photo. I've struggled with that one. Much appreciated.

  • LynetteBell profile image

    LynetteBell 5 years ago from Christchurch, New Zealand

    How do you put two or more pictures and a caption under each picture please?

  • Millionairemomma profile image

    Millionairemomma 5 years ago

    Very helpful.

  • profile image

    anonymous 5 years ago

    Thanks you are helping perfect many things through your lens. Thank you so much.

  • samsipet profile image

    samsipet 5 years ago

    This page is a must bookmark for anyone like me. Thanks a bunch!

  • BLouw profile image

    Barbara Walton 5 years ago from France

    Struggle with html and find the easiest way is just to keep libraries of text and cut and paste. Lazy I know. Saved lots of these, so many thanks.

  • mythphile profile image
    Author

    Ellen Brundige 5 years ago from California

    @lclchors: No, unfortunately, Squidoo doesn't support embedded content. (It's too easy to slip in malware or things that are incompatible with Squidoo.)

  • profile image

    anonymous 5 years ago

    Very useful

  • profile image

    anonymous 5 years ago

    Thank you!!!! I am doing a web project for my ITE 130 class and I found your page and it helped me greatly! You are awesome! THANK YOU FOR POSTING THIS PAGE!!!!!!

  • russiangifts profile image

    russiangifts 5 years ago from USA

    Thank you for explaining everything in such a simple way (even I understand almost everything :-)

  • cao2fine profile image

    cao2fine 5 years ago

    Thanks for sharing, I will be referring to this a lot!

  • profile image

    xmen88 5 years ago

    Great site. I learn a lot from it.

  • lclchors profile image

    lclchors 5 years ago

    great site. is there a way to post an embed src in Squidoo?

  • profile image

    anonymous 5 years ago

    Thanks for the great css tips.

  • profile image

    anonymous 5 years ago

    Great tips, very helpful to me. thanks

  • profile image

    juliemac1012 5 years ago

    Thanks for the tips - I used the one for a caption under a right aligned pic and it worked it a treat!

  • profile image

    StaCslns 5 years ago

    Wow, this was so helpful! Thank you! You made it so easy to understand.

  • notedbybarb profile image

    notedbybarb 5 years ago

    Thank you for these well-presented and very helpful tutorials. So thoughtful of you to share.

  • Linda Pogue profile image

    Linda Pogue 5 years ago from Missouri

    Excellent resource for anyone. I know CSS and have bookmarked this lens. SquidAngel blessings!

  • williemack58 profile image

    williemack58 5 years ago

    Fantastic information, a bit overwhelming for a new squidadale, however I am sure in time it will become second nature.

  • IslandsTropicalM profile image

    IslandsTropicalM 5 years ago

    very useful tips, thanks for sharing

  • jadehorseshoe profile image

    jadehorseshoe 5 years ago

    My New PERFECT "Cheat Sheet." Thanks.

  • awestricken1 profile image

    Ken Parker 6 years ago from Tacoma, Wa

    align images can be tricky but you made it very easy. Nice work

  • profile image

    redleafloans 6 years ago

    Thanks for the tutorial. I'm kinda new to CSS and HTML so this would definitely help me a lot...:)

  • Retro Loco profile image

    Vicki 6 years ago from USA

    Excellent information here! I've had trouble aligning the captions under my photos. I'll give your code a try. Thank you so much for sharing your CSS &amp; HTML. As usual, your tutorials are a huge help! THANK YOU so much for sharing your technical expertise, Greekgeek!!

  • LadyLovelace LM profile image

    LadyLovelace LM 6 years ago

    I'm just dropping in to say thanks; you've been a great help to me (and many others, I'm sure) in my time at Squidoo, and I'm grateful for it.

  • FanfrelucheHubs profile image

    Nathalie Roy 6 years ago from France (Canadian expat)

    A big thank you for all your tutorials, each one of them is useful. Most are bookmarked (since we lost favorites) and I always check here first whenever I need a trick about doing something with my pages.

  • goo2eyes lm profile image

    goo2eyes lm 6 years ago

    will surely use these in my lenses. thanks for sharing

  • ciwash profile image

    ciwash 6 years ago

    I have been using your article for all of my articles. I just wanted to say thanks for the well written and comprehensive work you did on HTML. Well done.

  • profile image

    anonymous 6 years ago

    Thank you for the tips. I'm certain I'll use these in the future.

  • mythphile profile image
    Author

    Ellen Brundige 6 years ago from California

    @fastcard: Put it in a text module. :)

  • mythphile profile image
    Author

    Ellen Brundige 6 years ago from California

    @anonymous: Ah, there's one I can answer! Start the next paragraph with

    to say, "don't let anything float next to this."

  • profile image

    anonymous 6 years ago

    I have an image with float:right and I want start the next paragraph underneath it but aligned left as normal leaving a blank space above the text on the left and the image on the right.

  • Morgannafay profile image

    Morgannafay 6 years ago

    Now hopefully my zazzle stuff won't look dorky thanks to you. lol. Thank you Greekgeek! I was about to scream at my computer for not being able to put my image credits at the bottom of my pic. It would always want to go the way of the text I was trying to put beside it.

  • Mickie Gee profile image

    Mickie Goad 6 years ago

    I agree with the others posting here: your instructions for aligning images is simple and easy to understand. Thank you so very much--again (I am constantly returning to your "how to" pages.).

  • profile image

    KarenCookieJar 6 years ago

    thanks for the simple and easy to follow tutorial! I've been wanting to add margins to images and now I know how!