How to Align Images in CSS & HTML

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

More by this Author

Guestbook 190 comments

ckennedy lm profile image

ckennedy lm 8 years ago

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

ques2008 8 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 8 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 8 years ago

Wow, I really needed this! Thanks.

CherylK profile image

CherylK 8 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 8 years ago

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

Thank you!

MarkoZirkovich LM profile image

MarkoZirkovich LM 8 years ago

Thanks for the clear explanation. I really appreciate it.

Michaud68 LM profile image

Michaud68 LM 8 years ago

Thank you needed this so much

Michaud68 LM profile image

Michaud68 LM 8 years ago

Almost Forgot 5*'s

BABYKITTY 8 years ago

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

Thank you so much!

anonymous 8 years ago

This site was incredibly helpful, and very well illustrated. The organization and artistic method was very pleasant and fresh. Thanks for putting up this site for those of us, who occasionally need a life line on html/css like this.

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

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

Thanks. Needed to link an image. Works great

OhMe profile image

OhMe 7 years ago from Pendleton, SC

I sure needed this information. Thank you.

mythphile profile image

mythphile 7 years ago from California Author

[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 7 years ago

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

jimmielanley profile image

jimmielanley 7 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 7 years ago

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

GoutWife profile image

GoutWife 7 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 7 years ago

This is an amazing resource, thanks :)

roysumit 7 years ago

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

Louise0711 profile image

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

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

SoyCandleLover 6 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...

ungupurple 6 years ago

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

jbanning 6 years ago

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

Wednesday-Elf profile image

Wednesday-Elf 6 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

PNWtravels 6 years ago from Wandering the Pacific Northwest USA

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

julieannbrady 6 years ago

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

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

pkmcruk 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

Gloriousconfusion 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

LisaAuch1 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

aesta1 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

mythphile 6 years ago from California Author

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

anonymous 6 years ago

Sweeeet material. Very helpful. Thanks

Lorymer profile image

Lorymer 6 years ago

Impressive design. Verry useful information.

WhitePineLane 5 years ago

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

Shades-of-truth profile image

Shades-of-truth 5 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

CrossCreations 5 years ago from St. Louis, MO

thanks SO much! Really appreciate your help.

stuhaynes lm profile image

stuhaynes lm 5 years ago

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

maurisrx 5 years ago

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

anonymous 5 years ago

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

Violin-Student profile image

Violin-Student 5 years ago

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

-Art Haule

Geekgurl profile image

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

CellPhoneSpyPrograms 5 years ago

Thanks.. Great help today!

BlueStarling profile image

BlueStarling 5 years ago

Great tips and very clearly explained!

anonymous 5 years ago


Gotta problem here.

I copied below code from How to Add Background Images & 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

mythphile 5 years ago from California Author

@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 5 years ago

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

Richard-H profile image

Richard-H 5 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

mythphile 5 years ago from California Author

@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

LisaAuch1 5 years ago from Scotland

i have found thisthis page a lot!

Diana Wenzel profile image

Diana Wenzel 5 years ago from Colorado

I learned just what I needed. Thanks!

PoorPinoy profile image

PoorPinoy 5 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 5 years ago

Blessed by a SquidAngel :)

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

hendkur 5 years ago

wow....very good information.thanks

giacombs-ramirez profile image

giacombs-ramirez 5 years ago from Montana

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

anonymous 5 years ago

Thanks for the help on my image link problem

grandma deal profile image

grandma deal 5 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

mythphile 5 years ago from California Author

@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

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

mythphile 5 years ago from California Author

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

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

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

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~~ ^^

dilipsvarma 5 years ago

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

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

mythphile 5 years ago from California Author

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

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

mythphile 5 years ago from California Author

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


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

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

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

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

mythphile 5 years ago from California Author

@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

mythphile 4 years ago from California Author

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

anonymous 4 years ago

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

ciwash profile image

ciwash 4 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 4 years ago

will surely use these in my lenses. thanks for sharing

FanfrelucheHubs profile image

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

Retro Loco 4 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 & HTML. As usual, your tutorials are a huge help! THANK YOU so much for sharing your technical expertise, Greekgeek!!

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

awestricken1 4 years ago from Tacoma, Wa

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

jadehorseshoe profile image

jadehorseshoe 4 years ago

My New PERFECT "Cheat Sheet." Thanks.

IslandsTropicalM profile image

IslandsTropicalM 4 years ago

very useful tips, thanks for sharing

williemack58 profile image

williemack58 4 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 4 years ago from Missouri

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

notedbybarb profile image

notedbybarb 4 years ago

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

StaCslns 4 years ago

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

juliemac1012 4 years ago

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

anonymous 4 years ago

Great tips, very helpful to me. thanks

anonymous 4 years ago

Thanks for the great css tips.

lclchors profile image

lclchors 4 years ago

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

xmen88 4 years ago

Great site. I learn a lot from it.

cao2fine profile image

cao2fine 4 years ago

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

russiangifts profile image

russiangifts 4 years ago from USA

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

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

anonymous 4 years ago

Very useful

mythphile profile image

mythphile 4 years ago from California Author

@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

BLouw 4 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 4 years ago

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

anonymous 4 years ago

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

Millionairemomma profile image

Millionairemomma 4 years ago

Very helpful.

LynetteBell profile image

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

mythphile 4 years ago from California Author

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

GilliansCloud 4 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 4 years ago

Thank you for these tips!

ravedid 4 years ago

Well explained just what was needed - Great tips Thank You

jillian22 4 years ago

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

simoza01 lm profile image

simoza01 lm 4 years ago

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

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

Ben Z98 4 years ago

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

Totus Mundus profile image

Totus Mundus 4 years ago

Your tutorials are just too good!

coetzeevictor 4 years ago

Great and useful tutorial. Very informative and easy to understand

mythphile profile image

mythphile 4 years ago from California Author

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

mythphile 4 years ago from California Author

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

anonymous 4 years ago

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

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

mythphile 4 years ago from California Author

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


anonymous 4 years ago

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

Please help !

mythphile profile image

mythphile 4 years ago from California Author

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

anonymous 4 years ago

Your lessons are really helpful.

violet-sky-39 4 years ago

So helpful lessons...

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*

ZionAmal 4 years ago

Wow , well written :)

Really helped me a lot

anonymous 3 years ago

Thank you:) your explanation helped me a lot.

Spletni Delavec profile image

Spletni Delavec 3 years ago

Great. I will come back :)

sibiana 3 years ago

Great resource, liked and bookmarked

Totus Mundus profile image

Totus Mundus 3 years ago

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

Judith Nazarewicz profile image

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

Such an awesome resource! Thanks :-)

windblowertm 3 years ago

Great article and very helpful. Thank you so much!

MakeHairBows 3 years ago

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

oddobjective profile image

oddobjective 3 years ago

Great info...definitely bookmarked.

applejacking 3 years ago

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

mythphile profile image

mythphile 3 years ago from California Author

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

applejacking 3 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

anonymous 3 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

iortizvictory 3 years ago

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

mishraashish 3 years ago

Great article and very helpful. Thank you so much!

Felicitas profile image

Felicitas 3 years ago

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

XHTMLJunction LM profile image

XHTMLJunction LM 3 years ago

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

anonymous 3 years ago

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

Art Inspired profile image

Art Inspired 3 years ago

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

Snakesmum profile image

Snakesmum 3 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 3 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.

1800loanstore 3 years ago

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

Margot_C 3 years ago

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

PaigSr profile image

PaigSr 3 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

Snakesmum 3 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 3 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.

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 21 months 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

Syeda Zainab 14 months ago from Rawalpindi, Pakistan

Claudia Thompson 2 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!

Irfan Shaikh 6 weeks ago

excellent article! very useful. Thnx

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.

    Click to Rate This Article