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":
Replace the part in quotes with the URL of your image.
But That's Not Enough, Because...
That HTML code places a graphic, but there's no alignment commands. Without them, the graphic is going to stick up above your text as if it's a really, really enormous letter.
For example, look at how the text is behaving here:
Here's the code that created that mess:
My cat likes to help my friend Lynne when she is basting a quilt. My cat is an expert quilt-holder. She sprawls like this: <img src="http://www.example.com/cat-picture.jpg"> and holds down the fabric. The downside, of course, is cat fur on the quilt. Lynne says that's breaking it in.
Do you see how the web browser is treating the image like a great big huge letter that sticks up above the rest of the text, shoving down the sentence surrounding it? That's almost never useful.
Aligning Images Left or Right
To fix this problem, you could put the image in its own paragraph with nothing to its left or right (except maybe another image):
The other option is to tell the web browser to push the graphic all the way to the left or right, and make the text fill in NEXT to it, as the cat graphic to the right is doing here.
This is the code you need to align an image to the right:
<img src="http://www.example.com/graphic.jpg" style="float: right; margin-left: 5px; margin-bottom: 5px;">
(The unbolded parts are optiona.)
What's all that gobbledygook mean? Let's break it down.
- <img ... > is the placeholder for an image.
- src="..." tells the web browser where the image's data is stored or uploaded (its location, its URL).
- style="..." style tells the web browser to expect a special set of codes called CSS (never mind what that is) which explain how you want the image to be displayed: its size, its layout, whether it has a border, and so on. Styles can also be added to set text colors, sizes and fonts. If HTML is the main chassis of the car, styles tells the web browser about the car's paint job and whether it comes equipped with bluetooth or cup holders.
- float: right; means push the image as far to the right as it will go. If there's already something there (the sidebar, another floated image), then this image will squeeze in just to the left of that. This is how you tile images side by side. You can also float: left; to make images behave just like the letters of this paragraph: they'll start at the left-hand margin, then tile from left to right across the column until they run out of room, then they flow onto the next line.
- margin-left and margin-bottom are optional. They add a little bit of an empty border (px means "pixels") to the left and under the image so things aren't mashed right up against it. If you have floated an image to the left, you should probably include a margin-right to add padding there.
VERY IMPORTANT: TO TURN OFF "FLOAT", use the following command:
<p style="clear: both;">
Why would you want to do that? Well, if an image is floated all the way to the right or left, whatever you write after that will attempt to fill in around it. For example, the text above above filled in around that cat picture.
If you don't want the following paragraph to fill in next to the floated object, then you need to use the clear command to draw an invisible horizontal line across the page that says "everything after this has to start on a new paragraph, below the floated image(s)."
HTML Code For Turning a Graphic Into a Link
You know how to make a link like this one, right?
<a href="https://hubpages.com/sports/jackierobinson">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!
<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>
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
Please share and/or rate this page if you found it useful!
© 2008 Ellen Brundige
Heidi on March 10, 2017:
You are a wealth of information. Thank you so much for posting all this great information for a beginner like me.
Emerson Carvalho on December 09, 2016:
Irfan Shaikh on September 11, 2016:
excellent article! very useful. Thnx
Claudia Thompson on August 17, 2016:
On your section about putting a caption under aligned text....
Where you have this:
You made a mistake here:
I know this because I just tried it LOL!
kashif from Rawalpindi, Pakistan on August 18, 2015:
TTGReviews on January 27, 2015:
@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.
Jackie on September 15, 2014:
Not my favorite tutorial, very confusing. The part on how to make the image a link? Well first of all your "How to Make an Image a Clickable Link" doesn't link to anything, secondly you say "You know how to make a link like this one, right?" but what if I don't know how? Please don't assume you know what I do know, and what I don't know!
tammywilliams09 on August 01, 2013:
Great work! Easy to follow. Thanks.
LaptopLeader on June 07, 2013:
Thanks for the info. It was very useful for me. :)
Snakesmum on June 04, 2013:
Have added this page for future reference, as HTML and CSS are not my strong points.
Thanks for writing it. :-)
PaigSr from State of Confusion on May 07, 2013:
I found one that I want to try right away. Others that will be added in later. Thanks.
Margot_C on April 18, 2013:
Your tips work great. I've used a couple and they've always worked exactly as advertised. Thanks.
1800loanstore on April 01, 2013:
thanks, i've been trying to figure out how to position my elements for a while now.
SouthernSailor on March 28, 2013:
This page has helped me sooooooooooooo much. Thanks a million for the easy to understand basic instructions that should get anyone off and running with HTML.
Snakesmum on March 15, 2013:
Wish I'd found this a long time ago - would have made it so much easier to align images on a site.
Art Inspired on March 11, 2013:
Thanks for sharing your knowledge and helping others. Make it a great day!
anonymous on February 22, 2013:
Thanks mate. Very resourceful post for everyone with little knowledge on HTML. Thanks once again.
XHTMLJunction LM on February 11, 2013:
I am very happy to read this article! Thanks for giving us this useful information. Fantastic walk-through. I appreciate this post.
Felicitas on January 22, 2013:
Thanks. I've only used one of your tips so far and it's already helped.
mishraashish on January 19, 2013:
Great article and very helpful. Thank you so much!
iortizvictory on December 20, 2012:
I really like how you put this together. The imagery is fantastic! Thanks for the great resource!
anonymous on December 13, 2012:
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
applejacking on December 07, 2012:
@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
Ellen Brundige (author) from California on December 07, 2012:
@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 on December 07, 2012:
Thanks so much. I think it's bit little different with CSS code for Wordpress or Blogspot platform.
oddobjective on November 27, 2012:
Great info...definitely bookmarked.
MakeHairBows on November 18, 2012:
Thank you very much for easy and simple to follow instructions. This has helped me a lot.
windblowertm on November 17, 2012:
Great article and very helpful. Thank you so much!
Judith Nazarewicz from Victoria, British Columbia, Canada on November 16, 2012:
Such an awesome resource! Thanks :-)
Totus Mundus on November 09, 2012:
This has saved me a lot of time, thank you.
sibiana on November 05, 2012:
Great resource, liked and bookmarked
Spletni Delavec on November 02, 2012:
Great. I will come back :)
anonymous on October 26, 2012:
Thank you:) your explanation helped me a lot.
ZionAmal on October 21, 2012:
Wow , well written :)
Really helped me a lot
dellgirl on October 17, 2012:
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*
violet-sky-39 on October 09, 2012:
So helpful lessons...
anonymous on October 09, 2012:
Your lessons are really helpful.
Ellen Brundige (author) from California on October 01, 2012:
@anonymous: Different websites have different options.
On Squidoo, we have to use CSS. We can get the code auto-generated for us if we use a tool like the "item box builder" on Squidtools.com, but we still wind up having to paste in the CSS codes.
If you build your own blog with software like Wordpress, it will automated the process for you, so you just have to upload pictures and type the captions. Again, the CSS is actually added to your webpage -- CSS is the set of commands that tell web browsers how to display things on the page -- but it's hidden from your view by most blogging software.
Sorry, I'm a little tired and not sure if that made sense!
anonymous on October 01, 2012:
Is there anyway to add captions below Html images without the help of CSS ?
Please help !
Wendy Leanne from Texas on September 28, 2012:
I had to stop back by today for a refresher on how to make my image clickable. Thanks.
ctmom1 on September 24, 2012:
Thank you, just what I needed. Off center pictures were making me crazy. Found exactly what I needed here! Bookmarked!
TheBLU26 on September 23, 2012:
I've been relying on this a lot! Thank you so much for this intuitive and helpful tutorial! Much appreciated!
Srena44 on September 12, 2012:
great info thanks for sharing
AstroGremlin on August 28, 2012:
@mythphile: It does make sense, Greekgeek. The right click is the key. Thanks so much!
Ellen Brundige (author) from California on August 28, 2012:
@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 on August 27, 2012:
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.
mouse1996 lm on August 23, 2012:
Great information. Very useful and helpful.
anonymous on August 11, 2012:
Exactly the tips I was looking for - thank you so much for sharing!!
MrMojo01 on August 11, 2012:
I've used HTML for years but am still struggling with CSS. Thanks for the article!
Ellen Brundige (author) from California on August 09, 2012:
@AdeelAthar LM: No widget, I'm just putting these codes in a text module. Don't forget to click save.
If that's what you're doing, then I don't know what's wrong, sorry!
LaurisB LM on August 03, 2012:
I've been trying to figure all this stuff out. This is so helpful! Thank you.
sunny saib on July 13, 2012:
very useful.. thanks
cgbroome on July 09, 2012:
Thanks for all the info. Now I've got to go learn how to put it into practice!
Ellen Brundige (author) from California on July 07, 2012:
@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.
coetzeevictor on June 28, 2012:
Great and useful tutorial. Very informative and easy to understand
Totus Mundus on June 24, 2012:
Your tutorials are just too good!
Ben Z98 on June 20, 2012:
Thanks! Now I'm another step ahead in writing my website
anonymous on June 19, 2012:
Appears to be great info but it doesn't change the position of my pic no matter what I do. Is it because the person that designed my CSS sheets that way .
Right now I type
and if I put the etc... it doesn't change anything. Any thoughts
simoza01 lm on June 16, 2012:
Just some of the tips I was looking for .. thanks so much ...
jillian22 on June 10, 2012:
Very useful - I will come back to it often for reference. How to Write an App
ravedid on June 06, 2012:
Well explained just what was needed - Great tips Thank You
Lou Martin from Atlanta, Georgia on June 04, 2012:
Thank you for these tips!
GilliansCloud on May 25, 2012:
Wow, I'll definitely be back to review all this. I was wondering how to have better picture placement in the modules. Thank you :)
Ellen Brundige (author) from California on May 22, 2012:
@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.
magictricksdotcom on May 22, 2012:
Thank you. Especially like the instruction on how to credit Creative Commons images under a photo. I've struggled with that one. Much appreciated.
LynetteBell from Christchurch, New Zealand on May 21, 2012:
How do you put two or more pictures and a caption under each picture please?
Millionairemomma on May 19, 2012:
anonymous on May 18, 2012:
Thanks you are helping perfect many things through your lens. Thank you so much.
samsipet on May 16, 2012:
This page is a must bookmark for anyone like me. Thanks a bunch!
Barbara Walton from France on May 14, 2012:
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.
Ellen Brundige (author) from California on May 11, 2012:
@lclchors: No, unfortunately, Squidoo doesn't support embedded content. (It's too easy to slip in malware or things that are incompatible with Squidoo.)
anonymous on May 03, 2012:
anonymous on April 17, 2012:
Thank you!!!! I am doing a web project for my ITE 130 class and I found your page and it helped me greatly! You are awesome! THANK YOU FOR POSTING THIS PAGE!!!!!!
russiangifts from USA on March 31, 2012:
Thank you for explaining everything in such a simple way (even I understand almost everything :-)
cao2fine on March 25, 2012:
Thanks for sharing, I will be referring to this a lot!
xmen88 on March 10, 2012:
Great site. I learn a lot from it.
lclchors on March 08, 2012:
great site. is there a way to post an embed src in Squidoo?
anonymous on February 25, 2012:
Thanks for the great css tips.
anonymous on February 20, 2012:
Great tips, very helpful to me. thanks
juliemac1012 on February 17, 2012:
Thanks for the tips - I used the one for a caption under a right aligned pic and it worked it a treat!
StaCslns on February 16, 2012:
Wow, this was so helpful! Thank you! You made it so easy to understand.
notedbybarb on January 06, 2012:
Thank you for these well-presented and very helpful tutorials. So thoughtful of you to share.
Linda Pogue from Missouri on January 04, 2012:
Excellent resource for anyone. I know CSS and have bookmarked this lens. SquidAngel blessings!
williemack58 on January 03, 2012:
Fantastic information, a bit overwhelming for a new squidadale, however I am sure in time it will become second nature.
IslandsTropicalM on January 02, 2012:
very useful tips, thanks for sharing
jadehorseshoe on December 24, 2011:
My New PERFECT "Cheat Sheet." Thanks.
Ken Parker from Tacoma, Wa on December 11, 2011:
align images can be tricky but you made it very easy. Nice work
redleafloans on November 24, 2011:
Thanks for the tutorial. I'm kinda new to CSS and HTML so this would definitely help me a lot...:)
Vicki from USA on November 16, 2011:
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!!
LadyLovelace LM on November 14, 2011:
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.
Nathalie Roy from France (Canadian expat) on November 10, 2011:
A big thank you for all your tutorials, each one of them is useful. Most are bookmarked (since we lost favorites) and I always check here first whenever I need a trick about doing something with my pages.
goo2eyes lm on November 08, 2011:
will surely use these in my lenses. thanks for sharing
ciwash on November 08, 2011:
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.
anonymous on November 02, 2011:
Thank you for the tips. I'm certain I'll use these in the future.
Ellen Brundige (author) from California on October 26, 2011:
@fastcard: Put it in a text module. :)
Ellen Brundige (author) from California on October 20, 2011:
@anonymous: Ah, there's one I can answer! Start the next paragraph with
to say, "don't let anything float next to this."
anonymous on October 20, 2011:
I have an image with float:right and I want start the next paragraph underneath it but aligned left as normal leaving a blank space above the text on the left and the image on the right.
Morgannafay on October 18, 2011:
Now hopefully my zazzle stuff won't look dorky thanks to you. lol. Thank you Greekgeek! I was about to scream at my computer for not being able to put my image credits at the bottom of my pic. It would always want to go the way of the text I was trying to put beside it.
Mickie Gee on October 18, 2011:
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.).
KarenCookieJar on October 09, 2011:
thanks for the simple and easy to follow tutorial! I've been wanting to add margins to images and now I know how!