AcademiaAgriculture & FarmingHumanitiesSocial SciencesSTEM

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="">

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=""> 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="" 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


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


    0 of 8192 characters used
    Post Comment

    • ckennedy lm profile image

      ckennedy lm 9 years ago

      Just what I needed to know. Bookmarked as my resource and 5-starred. Thanks!

    • profile image

      ques2008 9 years ago

      Wow, why didn't I stumble upon this earlier? If you've got the intestinal fortitude, give us more CSS lessons! That's my next dream, learn CSS to the max - woohoo.

      Great, fantastic job. I envy your skills, greekgeek!

    • clouda9 lm profile image

      clouda9 lm 9 years ago

      OMG! You just did what I have been pulling my hair out about for weeks...did not even know how to explain myself to post a question in SquidU Forum. Kudos!

    • beeobrien lm profile image

      beeobrien lm 9 years ago

      Wow, I really needed this! Thanks.

    • CherylK profile image

      Cheryl Kohan 9 years ago from Minnesota

      This is absolutely fabulous! I've printed it so I can follow it as I go. Thanks much.

    • gurneywagon profile image

      gurneywagon 9 years ago

      Still learning &amp; this will be a tremendous aid...

      Thank you!

    • MarkoZirkovich LM profile image

      MarkoZirkovich LM 9 years ago

      Thanks for the clear explanation. I really appreciate it.

    • Michaud68 LM profile image

      Michaud68 LM 9 years ago

      Thank you needed this so much

    • Michaud68 LM profile image

      Michaud68 LM 9 years ago

      Almost Forgot 5*'s

    • profile image

      BABYKITTY 9 years ago

      Thanks so much. I'm like several of the others here--I really needed this help!

      Thank you so much!

    • profile image

      MobyD 8 years ago

      There's some great stuff here! I've been wondering how to do a caption, and I see instructions. I'll be using your info for sure. 5 stars, favorited and bookmarked! The security word for me to post this is "wootgeek" which seems very appropriate!

    • packetlog profile image

      packetlog 8 years ago

      thank you. it's very helpful. i especially was looking for caption part!!

    • profile image

      DreamWeaverJan 8 years ago

      Thank you, I have saved this page for my own to come back and make my pages beautiful..THANK YOU!!

    • MBradley McCauley profile image

      MBradley McCauley 8 years ago

      WOW! I'm so impressed and now so knowledgeable--I know it's now sticking so I'm bookmarking! Have you put all this into a "For Dummies" book? Thanks for going to all the work.

      Mary Mc

    • jmarks lm profile image

      jmarks lm 8 years ago

      Thanks. Needed to link an image. Works great

    • OhMe profile image

      Nancy Tate Hellams 8 years ago from Pendleton, SC

      I sure needed this information. Thank you.

    • mythphile profile image

      Ellen Brundige 8 years ago from California

      [in reply to adez7] Woo! Thank you so much, hon! I wondered why this one jumped up the ranks suddenly -- so much for "Hah, my SEO skills are improving!" What would we do without angels? :)

    • JanieceTobey profile image

      JanieceTobey 8 years ago

      Perfect! Just what I was looking for! 5 stars! And most definitely favorited for future reference!

    • jimmielanley profile image

      Jimmie Lanley 8 years ago from Memphis, TN, USA

      I needed to know how to add a caption to an image. I googled "squidoo caption image" and here I am. AND I found what I wanted instantly due to your fancy table of contents. BINGO!

      another blessing is being served up now....

    • Laura45 LM profile image

      Laura45 LM 8 years ago

      Thank you for sharing these insightful tips and how-to's!

    • GoutWife profile image

      GoutWife 8 years ago

      I've taken to heart your advice on saving a handy bit of code to notepad. I can see myself using some of what I've learned here many, many times. Thanks you so much.

    • JanaMurray profile image

      JanaMurray 8 years ago

      This is an amazing resource, thanks :)

    • profile image

      roysumit 8 years ago

      Great resource. Wonderfully done. Thanks for sharing and five stars.

    • Louise0711 profile image

      Louise0711 8 years ago

      This is great info. Just what I was looking for. Thanks!

    • lakern26 lm profile image

      lakern26 lm 7 years ago

      Thank you so much for sharing your wealth of knowledge! I've been trying to figure out how to do this forever. 5* is sooo not enough!

    • profile image

      anonymous 7 years ago

      Fabulous. Thanks.

    • SallyCin profile image

      SallyCin 7 years ago

      Wow! This is a phenomenal resource! Thank you so much for sharing. :)

    • AuthorNormaBudden profile image

      AuthorNormaBudden 7 years ago

      Thank you, thank you, thank you. Need I say more?

    • JoyfulPamela2 profile image

      JoyfulPamela2 7 years ago from Pennsylvania, USA

      Thank you for your easy to understand directions. They are very helpful in making the ideas in my head become real. Thanks!

    • SoyCandleLover profile image

      BW Duerr 7 years ago from Henrietta, New York

      Thank so much for this great reference. If I left comments every time I visited... :D I'd love to eave 5 more stars for ya...

    • profile image

      ungupurple 7 years ago

      Ty, this is great. Im totally new in html and css code and I took down notes for me to try.

    • profile image

      jbanning 7 years ago

      Ya know something? so much cool....thank you............

    • Wednesday-Elf profile image

      Wednesday-Elf 7 years ago from Savannah, Georgia

      I'm ALWAYS having to 'look up' how to do this. Thanks so much for putting all the information for aligning pictures on a webpage in one place for me! It will save me a lot of time. Bookmarked for further reference!

    • Bella Stella profile image

      Bella Stella 6 years ago

      thnx for share these tips!

    • Kiwisoutback profile image

      Kiwisoutback 6 years ago from Massachusetts

      I'm definitely going to be using the hint about using captions. I've used the background code before too, though it's hard to position it just right unless you're using a pattern. Photos don't usually work quite as well and seem to show up differently in different browsers.

    • girlfriendfactory profile image

      girlfriendfactory 6 years ago

      You did such a great job with these tips! CSS can be tricky when it's inline/embedded vs. even internal, and certainly when you can use external, which is the easiest for me. Keeping track of the nesting and which tags support which styles can be a real pain. I love your color coded examples, too! Very nice!

    • PNWtravels profile image

      Vicki Green 6 years ago from Wandering the Pacific Northwest USA

      This was very helpful, but I still have much to learn.

    • profile image

      julieannbrady 6 years ago

      My dear, your tips are always so stellar! And so artfully presented. Love ya.

    • profile image

      anonymous 6 years ago

      Thank you for these helpful tips on graphics layout. Bookmarking this one for sure so that I can return easily. Blessed by a Squid Angel.

    • pkmcruk profile image

      pkmcr 6 years ago from Cheshire UK

      Really helpful and useful page that I can see me coming back to many times! Blessed by a passing Squid Angel :-)

    • Gloriousconfusion profile image

      Diana Grant 6 years ago from United Kingdom

      Enlightening - I get in quite a muddle doing all this, but I'll keep trying!

    • KarenTBTEN profile image

      KarenTBTEN 6 years ago

      I might learn these techniques someday. In the meantime... blessed by a SquidAngel.

    • LisaAuch1 profile image

      Lisa Auch 6 years ago from Scotland

      Thankyou as usual, stopped by with help on a very photo focused lens! i as usaul appreciate the manner in which you explain the process. Fab!

    • jlshernandez profile image

      jlshernandez 6 years ago

      I will definitely try some of these tips. Thank you so much for sharing.

    • aesta1 profile image

      Mary Norton 6 years ago from Ontario, Canada

      Very, very helpful.

    • Specialeetees profile image

      Specialeetees 6 years ago

      And thefluffanutta comes to the rescue yet again! You are fast becoming my absolutr hero of all time :)

    • mythphile profile image

      Ellen Brundige 6 years ago from California

      @Specialeetees: I'm only a sidekick. Fluffanutta's the real hero. :)

    • profile image

      anonymous 6 years ago

      Sweeeet material. Very helpful. Thanks

    • Lorymer profile image

      Lorymer 6 years ago

      Impressive design. Verry useful information.

    • profile image

      WhitePineLane 6 years ago

      Fabulously useful, and easy to understand. *Blessed by a Squid Angel*

    • Shades-of-truth profile image

      Emily Tack 6 years ago from USA

      All I can say, is "wow"! This is wonderful, and putting it to use immediately - thank you, as usual, for an incredible tutorial on how-to put those images to work - where you want 'em!

    • CrossCreations profile image

      Carolan Ross 6 years ago from St. Louis, MO

      thanks SO much! Really appreciate your help.

    • stuhaynes lm profile image

      stuhaynes lm 6 years ago

      This is sooo helpful. I've often wondered how to do stuff like this, so thank you

    • profile image

      maurisrx 6 years ago

      thanks a lot. This tutorial helps me to align my image in squidoo

    • profile image

      anonymous 6 years ago

      thx very useful for me to lay my photo out in my blog :)

    • Violin-Student profile image

      Violin-Student 6 years ago

      Excellent information, well presented as usual! Thanks for this! It's very, very helpful!

      -Art Haule

    • Geekgurl profile image

      Kimberly Hiller 6 years ago from Chicago

      Thanks to this information. My computer did not get thrown tonight. I have been so frustrated with trying to center several images in my module (I was using ).

    • profile image

      CellPhoneSpyPrograms 6 years ago

      Thanks.. Great help today!

    • BlueStarling profile image

      BlueStarling 6 years ago

      Great tips and very clearly explained!

    • profile image

      anonymous 6 years ago


      Gotta problem here.

      I copied below code from How to Add Background Images &amp; paste it into my Notepad.

      And saved it as FILENAME.HTML

      Unfortunately it doesn't seem to work when it's D-clicked..

      But removing -left part from padding-left: seems to work for me.

      Here is the new code then:

      Any way,Great Lesson

      Thank you very much.

      God Bless!

    • mythphile profile image

      Ellen Brundige 6 years ago from California

      @anonymous: Hmmmm. Notepad may not understand all the CSS commands that web browsers do. padding-left is a normal CSS command.

      I don't have Notepad, so I can't test it. But if that works for you, great!

      Just keep in mind that the padding command all by itself puts padding on all four sides of your text, in that case, not just on the left. You may find that looks odd in some circumstances.

    • I-sparkle profile image

      I-sparkle 6 years ago

      You're a life saver! Thanks for all the help.

    • Richard-H profile image

      Richard 6 years ago from Surrey, United Kingdom

      Invaluable information. Thank you! Do you have any tips adding different images in a tile or wall effect, like a block of slightly larger than thumbnail size pictures?

    • mythphile profile image

      Ellen Brundige 6 years ago from California

      @Richard-H: In general, I would just add a "float: left;" to the style of each image, which makes it behave like the letters in a line of text, each going as far left as there is room, then filling in the available space to the right of the one next to it. When they run out of room horizontally, the next float: left image would have to go onto a new line, again, just like the letters of a line of text only larger. To force a "line break," so to speak, one would make the style of the first image on the new row to be:

      style="float: left; clear: left;"

      meaning "go all the way to the left, and if there's something already there, go onto to the next line."

      I've got a few templates for multi-image Zazzle galleries here which could be adapted for regular graphics:

      In particular, the multi-image gallery is useful. Except that I made every graphic a linked graphic to get the referral in, so it's a little more complex than needed.

    • LisaAuch1 profile image

      Lisa Auch 6 years ago from Scotland

      i have found thisthis page a lot!

    • Diana Wenzel profile image

      Renaissance Woman 6 years ago from Colorado

      I learned just what I needed. Thanks!

    • PoorPinoy profile image

      PoorPinoy 6 years ago

      This tutorial is making me a Geek! Now i know image alignment, resizing and putting links on the image. Keep going. Thanks!

    • VarietyWriter2 profile image

      VarietyWriter2 6 years ago

      Blessed by a SquidAngel :)

    • profile image

      skygate 6 years ago

      Skygate Media, located in Norwalk CT and Manhattan NY, is an award winning website design company that specializes in web development, online marketing, best content management system as well as search engine optimization. The creative firms and Website development Houston, TX have undergone many phases.

    • profile image

      hendkur 6 years ago

      wow....very good information.thanks

    • giacombs-ramirez profile image

      gia combs-ramirez 6 years ago from Montana

      Thank you Greekgeek....just what I needed for a video on my blog! Blessed!

    • profile image

      anonymous 6 years ago

      Thanks for the help on my image link problem

    • grandma deal profile image

      grandma deal 6 years ago

      You know so much, I wonder if you have it all memorized, or do you refer to notes now and then. I have to take notes and I still have so much to become aware of, much less trying to learn it all. Thanks for all the great information.

    • mythphile profile image

      Ellen Brundige 6 years ago from California

      @grandma deal: I've finally got almost everything on this page memorized, but one of the reasons I originally wrote this page (and another I've got on CSS) is so I could look something up when I forgot how to do it. :D

    • profile image

      jeevsud 6 years ago

      Hi Greek geek...I tried using the source code to place the image where I want to but it just isn't working. Could you help me, cause I am starting to tear my hair out ..hehe

    • mythphile profile image

      Ellen Brundige 6 years ago from California

      @jeevsud: Hi, jeevsud! It's hard to troubleshoot in a guestbook, so how about you post the code that's giving you trouble in SquidU's help forum (go to "Help &amp; Tips" at the top of this page, pick "SquidU", go to the forums and then go to the Help forum).

      Tell us what you're trying to do, show us the code that's not working, and maybe we'll be able to find the problem. Sorry my page wasn't enough to get it working for you!

    • profile image

      jeevsud 6 years ago

      @mythphile: No problem at all...I will try to post the issue I am facing at the forum...thanks greek geek

    • sysuns profile image

      sysuns 5 years ago

      LOVE THESE TIPS....thanks a lot

    • profile image

      unqedomain 5 years ago

      Hi! again how will I use Steven Ewings free text in squidoo? Is there any guide? Thank you again, it is so helpful.

    • bames24 lm profile image

      bames24 lm 5 years ago

      great tips... thanks a ton for sharing them... :)

    • profile image

      anonymous 5 years ago

      This is very useful~~ Thankful~~~~~ I have been searching for this kind of code for long time~~!! So detail and so many different case describe, useful useful useful~~ ^^

    • profile image

      dilipsvarma 5 years ago

      even in times of editors. its nice to hand code the old fashioned way

    • profile image

      anonymous 5 years ago

      Great article. I just want to know something too. I know to text wrap images around text but how do i text wrap 2 images one below the other both left aligned around the text. I need a code that puts an image below another image aligned to the left. So that all the images are present one below the other left aligned and the text are on the right. Any kind of help would be appreciated. Thanks :-)

    • mythphile profile image

      Ellen Brundige 5 years ago from California

      George -- I approved your comment, but it's still not showing. If you want to have two images left-aligned, one above the other, in a block, with the text flowing around both of them, what you do is tuck them inside a paragraph whose width is set to be the width of the larger of the two of them -- and no more! Then you set that paragraph to float left. In that way, the paragraph will be a "floaty box" containing the two images -- and they'll wrap one above the other, because the width makes the paragraph too narrow for them side by side.

      Let me see if this thing lets me type code in a reply box. This is what I mean:

      [image code for first image] [image code for second image]

      The margin is just to give a little buffer around the "box" -- the paragraph -- which holds the images, so the text won't fill in bang up against the graphics. I used 200 pixels as the width in my example; set that number to the width of the larger of the two images. (It will look neater if they're both the same width; otherwise there will be a bit of blank space to the right of the narrower one.)

    • whoisbid lm profile image

      whoisbid lm 5 years ago

      I am certain this has helped so many people already. Thanks

    • profile image

      anonymous 5 years ago

      How we can add the two images side by side through html coding and we need a text between both the images

    • mythphile profile image

      Ellen Brundige 5 years ago from California

      @anonymous: Oh, that's tricky. Try this. Hopefully, it'll put the first image all the way on the left, the second image all the way on the right, and then the text will fill the space between them:


    • profile image

      Grandad52 5 years ago

      Thank you for all this. It sure makes things a little easier. I appreciate it.


    • aliciamaggie54 profile image

      aliciamaggie54 5 years ago

      Thank you for this useful information. This really comes in handy:) I have learned so much.

    • aesta1 profile image

      Mary Norton 5 years ago from Ontario, Canada

      This is really useful as usual. Thank you for all the tips you had been sharing here and in the forum.

    • modernchakra profile image

      modernchakra 5 years ago

      I have spent so much time now on the internet, building sites on different platforms and never got around any real html coding. I find this len's incredibly useful. Most of the things I had wanted to do were easy enough but I just never knew how. Thanks!

    • profile image

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

    • Mickie Gee profile image

      Mickie Goad 5 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.).

    • Morgannafay profile image

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

    • profile image

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

    • mythphile profile image

      Ellen Brundige 5 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."

    • mythphile profile image

      Ellen Brundige 5 years ago from California

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

    • profile image

      anonymous 5 years ago

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

    • ciwash profile image

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

    • goo2eyes lm profile image

      goo2eyes lm 5 years ago

      will surely use these in my lenses. thanks for sharing

    • FanfrelucheHubs profile image

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

    • LadyLovelace LM profile image

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

    • Retro Loco profile image

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

    • profile image

      redleafloans 5 years ago

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

    • awestricken1 profile image

      Ken Parker 5 years ago from Tacoma, Wa

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

    • jadehorseshoe profile image

      jadehorseshoe 5 years ago

      My New PERFECT "Cheat Sheet." Thanks.

    • IslandsTropicalM profile image

      IslandsTropicalM 5 years ago

      very useful tips, thanks for sharing

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

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

    • notedbybarb profile image

      notedbybarb 5 years ago

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

    • profile image

      StaCslns 5 years ago

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

    • 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

      anonymous 5 years ago

      Great tips, very helpful to me. thanks

    • profile image

      anonymous 5 years ago

      Thanks for the great css tips.

    • lclchors profile image

      lclchors 5 years ago

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

    • profile image

      xmen88 5 years ago

      Great site. I learn a lot from it.

    • cao2fine profile image

      cao2fine 5 years ago

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

    • russiangifts profile image

      russiangifts 5 years ago from USA

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

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

    • profile image

      anonymous 5 years ago

      Very useful

    • mythphile profile image

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

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

    • samsipet profile image

      samsipet 5 years ago

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

    • profile image

      anonymous 5 years ago

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

    • Millionairemomma profile image

      Millionairemomma 5 years ago

      Very helpful.

    • 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?

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

    • mythphile profile image

      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):

      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.

    • 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 :)

    • Louidam1 LM profile image

      Louidam1 LM 5 years ago

      Thank you for these tips!

    • profile image

      ravedid 5 years ago

      Well explained just what was needed - Great tips Thank You

    • profile image

      jillian22 5 years ago

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

    • simoza01 lm profile image

      simoza01 lm 5 years ago

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

    • 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

    • profile image

      Ben Z98 5 years ago

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

    • Totus Mundus profile image

      Totus Mundus 5 years ago

      Your tutorials are just too good!

    • profile image

      coetzeevictor 5 years ago

      Great and useful tutorial. Very informative and easy to understand

    • mythphile profile image

      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.

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

    • sunny saib profile image

      sunny saib 5 years ago

      very useful.. thanks

    • LaurisB LM profile image

      LaurisB LM 4 years ago

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

    • mythphile profile image

      Ellen Brundige 4 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!

    • MrMojo01 profile image

      MrMojo01 4 years ago

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

    • profile image

      anonymous 4 years ago

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

    • profile image

      mouse1996 lm 4 years ago

      Great information. Very useful and helpful.

    • AstroGremlin profile image

      AstroGremlin 4 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.

    • mythphile profile image

      Ellen Brundige 4 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 4 years ago

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

    • Srena44 profile image

      Srena44 4 years ago

      great info thanks for sharing

    • TheBLU26 profile image

      TheBLU26 4 years ago

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

    • ctmom1 profile image

      ctmom1 4 years ago

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

    • Wendy Leanne profile image

      Wendy Leanne 4 years ago from Texas

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


    • profile image

      anonymous 4 years ago

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

      Please help !

    • mythphile profile image

      Ellen Brundige 4 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, 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 4 years ago

      Your lessons are really helpful.

    • profile image

      violet-sky-39 4 years ago

      So helpful lessons...

    • profile image

      dellgirl 4 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

      ZionAmal 4 years ago

      Wow , well written :)

      Really helped me a lot

    • profile image

      anonymous 4 years ago

      Thank you:) your explanation helped me a lot.

    • Spletni Delavec profile image

      Spletni Delavec 4 years ago

      Great. I will come back :)

    • profile image

      sibiana 4 years ago

      Great resource, liked and bookmarked

    • Totus Mundus profile image

      Totus Mundus 4 years ago

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

    • Judith Nazarewicz profile image

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

      Such an awesome resource! Thanks :-)

    • profile image

      windblowertm 4 years ago

      Great article and very helpful. Thank you so much!

    • profile image

      MakeHairBows 4 years ago

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

    • oddobjective profile image

      oddobjective 4 years ago

      Great info...definitely bookmarked.

    • profile image

      applejacking 4 years ago

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

    • mythphile profile image

      Ellen Brundige 4 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 4 years ago

      @mythphile: According my experience, Wordpress CSS are easier to edit than Squidoo. Some cool WP code are really pretty but can't run perfectly in Squid. And you're right, the Squid made change today. The dashboard and workshop are different from the previous. And hopefully this edit will fix some CSS problem and support to HTML 5 :D

    • 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

    • 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

      mishraashish 4 years ago

      Great article and very helpful. Thank you so much!

    • Felicitas profile image

      Felicitas 4 years ago

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

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

    • profile image

      anonymous 4 years ago

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

    • Art Inspired profile image

      Art Inspired 4 years ago

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

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

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

    • profile image

      1800loanstore 4 years ago

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

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

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

    • 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. :-)

    • LaptopLeader profile image

      LaptopLeader 4 years ago

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

    • tammywilliams09 profile image

      tammywilliams09 3 years ago

      Great work! Easy to follow. Thanks.

    • profile image

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

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

    • Syeda Zainab profile image

      kashif 23 months ago from Rawalpindi, Pakistan

    • profile image

      Claudia Thompson 11 months ago

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

      Where you have this:

      You made a mistake here:


      instead of


      I know this because I just tried it LOL!

    • profile image

      Irfan Shaikh 10 months ago

      excellent article! very useful. Thnx

    • profile image

      Emerson Carvalho 7 months ago


    • profile image

      Heidi 4 months ago

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

    Click to Rate This Article