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!

Questions & Answers

    © 2008 Ellen Brundige

    Guestbook

    Submit a Comment

    • profile image

      Heidi 

      20 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 

      23 months ago

      Excelent!

    • profile image

      Irfan Shaikh 

      2 years ago

      excellent article! very useful. Thnx

    • profile image

      Claudia Thompson 

      2 years 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 

      3 years ago from Rawalpindi, Pakistan

    • TTGReviews profile image

      TTGReviews 

      3 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 

      4 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 

      5 years ago

      Great work! Easy to follow. Thanks.

    • LaptopLeader profile image

      LaptopLeader 

      5 years ago

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

    • profile image

      Snakesmum 

      5 years ago

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

      Thanks for writing it. :-)

    • PaigSr profile image

      PaigSr 

      5 years ago from State of Confusion

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

    • profile image

      Margot_C 

      5 years ago

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

    • profile image

      1800loanstore 

      5 years ago

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

    • SouthernSailor profile image

      SouthernSailor 

      5 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.

    • profile image

      Snakesmum 

      5 years ago

      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 

      5 years ago

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

    • profile image

      anonymous 

      5 years ago

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

    • XHTMLJunction LM profile image

      XHTMLJunction LM 

      5 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 

      5 years ago

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

    • profile image

      mishraashish 

      5 years ago

      Great article and very helpful. Thank you so much!

    • profile image

      iortizvictory 

      5 years ago

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

    • profile image

      anonymous 

      5 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 imageAUTHOR

      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 

      6 years ago from Victoria, British Columbia, Canada

      Such an awesome resource! Thanks :-)

    • Totus Mundus profile image

      Totus Mundus 

      6 years ago

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

    • profile image

      sibiana 

      6 years ago

      Great resource, liked and bookmarked

    • Spletni Delavec profile image

      Spletni Delavec 

      6 years ago

      Great. I will come back :)

    • profile image

      anonymous 

      6 years ago

      Thank you:) your explanation helped me a lot.

    • profile image

      ZionAmal 

      6 years ago

      Wow , well written :)

      Really helped me a lot

    • profile image

      dellgirl 

      6 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 

      6 years ago

      So helpful lessons...

    • profile image

      anonymous 

      6 years ago

      Your lessons are really helpful.

    • mythphile profile imageAUTHOR

      Ellen Brundige 

      6 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 

      6 years ago

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

      Please help !

    • Wendy Leanne profile image

      Wendy Leanne 

      6 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 

      6 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 

      6 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 

      6 years ago

      great info thanks for sharing

    • AstroGremlin profile image

      AstroGremlin 

      6 years ago

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

    • mythphile profile imageAUTHOR

      Ellen Brundige 

      6 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 

      6 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 

      6 years ago

      Great information. Very useful and helpful.

    • profile image

      anonymous 

      6 years ago

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

    • MrMojo01 profile image

      MrMojo01 

      6 years ago

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

    • mythphile profile imageAUTHOR

      Ellen Brundige 

      6 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 

      6 years ago

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

    • sunny saib profile image

      sunny saib 

      6 years ago

      very useful.. thanks

    • cgbroome profile image

      cgbroome 

      6 years ago

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

    • mythphile profile imageAUTHOR

      Ellen Brundige 

      6 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 

      6 years ago

      Great and useful tutorial. Very informative and easy to understand

    • Totus Mundus profile image

      Totus Mundus 

      6 years ago

      Your tutorials are just too good!

    • profile image

      Ben Z98 

      6 years ago

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

    • profile image

      anonymous 

      6 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 

      6 years ago

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

    • profile image

      jillian22 

      6 years ago

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

    • profile image

      ravedid 

      6 years ago

      Well explained just what was needed - Great tips Thank You

    • Louidam1 LM profile image

      Lou Martin 

      6 years ago from Atlanta, Georgia

      Thank you for these tips!

    • profile image

      GilliansCloud 

      6 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 imageAUTHOR

      Ellen Brundige 

      6 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 

      6 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 

      6 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 

      6 years ago

      Very helpful.

    • profile image

      anonymous 

      6 years ago

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

    • samsipet profile image

      samsipet 

      6 years ago

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

    • BLouw profile image

      Barbara Walton 

      6 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 imageAUTHOR

      Ellen Brundige 

      6 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 

      6 years ago

      Very useful

    • profile image

      anonymous 

      6 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 

      6 years ago from USA

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

    • cao2fine profile image

      cao2fine 

      6 years ago

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

    • profile image

      xmen88 

      6 years ago

      Great site. I learn a lot from it.

    • lclchors profile image

      lclchors 

      6 years ago

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

    • profile image

      anonymous 

      6 years ago

      Thanks for the great css tips.

    • profile image

      anonymous 

      6 years ago

      Great tips, very helpful to me. thanks

    • profile image

      juliemac1012 

      6 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 

      6 years ago

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

    • notedbybarb profile image

      notedbybarb 

      6 years ago

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

    • Linda Pogue profile image

      Linda Pogue 

      6 years ago from Missouri

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

    • williemack58 profile image

      williemack58 

      6 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 

      6 years ago

      very useful tips, thanks for sharing

    • jadehorseshoe profile image

      jadehorseshoe 

      6 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 

      7 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 

      7 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 

      7 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 

      7 years ago

      will surely use these in my lenses. thanks for sharing

    • ciwash profile image

      ciwash 

      7 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 

      7 years ago

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

    • mythphile profile imageAUTHOR

      Ellen Brundige 

      7 years ago from California

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

    • mythphile profile imageAUTHOR

      Ellen Brundige 

      7 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 

      7 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 

      7 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 

      7 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 

      7 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!

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, owlcation.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://owlcation.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)