Web Design Stuff
HTML Tutorials    CSS Tutorials    Web Hosting   Resources
Create a Web Page 101
Making Web Pages Intro What is a Web Page? Why Make a Web Page? The History of HTML Learn HTML or XHTML?
Basic HTML
Basic HTML Tutorials Basic HTML Necessities How to Make a Web Page How to Edit a Web Page The Basics of HTML Tags Basic HTML Page Structure HTML Attributes
HTML Font Codes
HTML Font Codes Intro HTML Font Color Codes HTML Font Size Codes HTML Font Style Codes HTML Bold/Italic Codes Combining Font Codes
Formatting Text
Formatting Text Intro Making Paragraphs Miscellaneous Formatting Headings & Subheadings Creating Hyperlinks
Using Graphics
Using Graphics on the Web Add Graphics to Your Pages Graphics and Accessibility How to Align Graphics Page Color & Background Graphics as Hyperlinks Horizontal Rules
Creating Tables
HTML Tables Tutorials HTML Table Fundamentals Background & Border Color Table Frames & Rules Table Width and Alignment Cells 1 -Space & Alignment Cells 2 -Row Column Span Cells 3 -Width & Height
Making Lists
HTML Lists Tutorials Bulleted Lists Numbered Lists Definition Lists
HTML Frames
HTML Frames Tutorials Using Frames for Layout Advanced Frame Layouts Putting Hyperlinks in Frames Frame Border Width Color, Margin and Control Problems with Frames SmartFrames: A Solution SSI: An Alternative to Frames
Web Page Forms
Making Feedback Forms A Simple Feedback Form Installing NMS FormMail Debugging Your Setup My Web Host is Out to Lunch User Input Components Text Fields Checkboxes & Radio Buttons Dropdown Menus Push Buttons Layout and Presentation
Basic CSS
Basic CSS Tutorials What is CSS? Why You Should Use CSS How to Use CSS Inline Styles Embedded Style Sheets External Style Sheets Class Selectors ID Selectors Combining Selectors
CSS Properties
CSS Properties Intro Font Styles Width, Height & Spacing Borders Backgrounds Position Float & Alignment Hyperlinks
All About Web Hosting
Hosting Your Own Website What is a Web Host? Your Website's Home Page Building a Website Offline About Free Web Hosting Best Free Web Hosting Commercial Web Hosting How to Get a Domain Name Ecommerce Web Hosting Web Hosting Terminology
Free Web Design Tools
Best Free Website Tools Best Free Text Editors Best Free Graphics Editors Free Website Analysis Tools
Setting Up HTML Kit
HTML Kit Introduction How to install HTML Kit Screenshot Breakdown Basic Configuration Overall Appearance Shortcuts and Startup Editing Window Customizing Toolbars Using the Favorites Tab Making a New Actions Bar Odds and Ends
Free Templates
Free Website Templates Two Column Fixed Width Three Column Liquid Layout Miscellaneous Templates Dynamic Menu Effects Two Column Experimental Terms of Use About These Templates
Website Templates Help
Getting Started Template Zip File Download How to Edit Your Template What to Edit in the HTML How to Add Your Logo Making a Website
Web Design Tips
Web Design Basics Tables vs. Tableless Using Tables for Layout Example Table Layouts World's Crappiest Web Page
Twitter Backgrounds
Twitter Backgrounds Intro Cool Twitter Backgrounds Cool Twitter Backgrounds 2 Plain Twitter Backgrounds Dark Twitter Backgrounds Best Twitter Backgrounds Cute Twitter Backgrounds Music Twitter Backgrounds Music Twitter Backgrounds 2 Twitter Backgrounds 101 TERMS OF USE
All About Web Browsers
What is a Web Browser? Mozilla Firefox Internet Explorer Opera How to Set Up Firefox Top 5 Firefox Extensions
 
Contact
Post Some Feedback Send Me An Email Iron Spider Blog About Iron Spider... Site Conventions
 
 
 

 

Aligning Graphics

 
<img src="mycoolpic.gif"
align="position"
hspace="pixels"
vspace="pixels">
 
 
Horizontal alignment
Blank space bordering left and right side
Blank space bordering top and bottom
 
In the hundreds of personal pages that I've visited on the net over the past few years, I've noticed that many web authors fail to take advantage of ability to float graphics to the left or right on their web pages. When you float images to the left or right, it causes adjacent text to flow along the right or left borders of your graphic and then continue below it once the text flow exceeds the bottom border. This makes text appear to 'wrap around' your graphics and thus creates a professional looking layout. The wrap-around effect is created using the align attribute with the img element.

The following examples will illustrate. (For demonstrational purposes, the width of the boxes containing the results represents the width of available space on your web page):

Example 1 - SOURCE CODE

<p>
<img src="mycoolpic.gif" align="left">...some text...
</p>



Example 1 - RESULT

My Cool PictureThis image's align attribute is set to left. The image 'floats' to the left as the text wraps around the right of the image. It will continue to do so as long as the block element which contains both the image and the text is not terminated by its end tag. As the text continues past the bottom border of the image, it re-aligns itself with the original left margin.



Example 2 - SOURCE CODE

<p>
<img src="mycoolpic.gif" align="right">...some text...
</p>



Example 2 - RESULT

My Cool PictureThis image's align attribute is set to right. The image 'floats' to the right as the text flow wraps around the left of the image.

Line breaks can be created using the br element. As the text continues past the bottom border of the image, it flows as it would normally to the original right margin.



Example 3 - SOURCE CODE

<p>
<img src="mycoolpic.gif" align="left">...some text... <br clear="all">...some more text clearing the bottom...
</p>



Example 3 - RESULT

My Cool PictureHere's another example of an image's align attribute set to left. The image 'floats' to the left as the text flow wraps around the right.

Using the br element with the clear="all" attribute-value pair you can cause the text that follows to continue on the first line that clears the bottom of all floating objects (in this case, mycoolpic.gif).


Three other values that you can use with align attribute are: top, middle and bottom which control the layout of your graphic with respect to the current text line or baseline. (The baseline is the imaginary horizontal line that your text rides on.) The following examples will illustrate:

Example 4 - SOURCE CODE

<img src="mycoolpic.gif"
    align="top, middle, or bottom">



Example 4A - RESULT

My Cool PictureThis image's align attribute is set to top. The text aligns with the top of the image.



Example 4B - RESULT

My Cool PictureThis image's align attribute is set to middle. The text aligns with the vertical center line of the image.



Example 4C - RESULT

My Cool PictureThis image's align attribute is set to bottom. The text aligns with the bottom of the image or more specifically the image rides on the baseline of the text. This is the default setting when no align attribute is declared in the <img> tag.


White Space Around Graphics


Well that's all very fine and well, you may say, but when I align my image to the left I don't want the text crammed right up against the edge of my graphic like that. Can I do something about that?

You sure can! Using the hspace and the vspace attributes you can control how much blank space or white space to display around your images. The following examples illustrate:

Example 5 - SOURCE CODE

<p>
...some text... <img src="mycoolpic.gif" align="left" hspace="20" vspace="30"> ...some more text...
</p>



Example 5 - RESULT

This image has its align attribute set to left which floats the image to the left and causes the text to wrap around the right. My Cool PictureIn addition to this, the hspace and the vspace attributes are used whose values represent lengths in pixels. The hspace attribute defines how much white space to allot on either side of the image while the vspace attribute defines how much white space to allot on the top and bottom of the image. In this example, 20 pixels of white space border on the left and right side of the image respectively while 30 pixels of white space border on the top and bottom of the image.



And last but certainly not least, if you simply want to align your graphic in the center of the page without wrapping any text around it, place your <img> tag within the <center>...</center> tags:
Example 6 - SOURCE CODE

...some text...
<center><img src="mycoolpic.gif" vspace="10"></center>
...some more text...


Example 6 - RESULT

This image is placed in the center of the page using the center element. The text does not wrap around the image. All text that appears before the <img> tag in the source code will be displayed on top of the image.
My Cool Picture
All text that appears after the <img> tag in the source code will be displayed below the image. You can use the vspace attribute to implement some fine control of the white space on the top and bottom of the image.



NOTE:

In all of the above examples I have omitted using the alt, width and height attributes for the purposes of clarity. This is not in any way, shape or form meant to diminish their importance. See Using Graphics - Accessibility for more information.


If you've done any amount of surfing on the internet, you are probably aware that you can also use images to wallpaper the background of your entire web page. This technique along with setting the background color of your web page without using images will be covered next...




Best Free Stuff
for webmasters

Free Text Editors
Free Graphics Editors
Website Analysis Tools
Free Website Templates

See also:

Best Free Web Hosting

 

If you need a .COM web address, you can get one quick and easy at...

www.GoDaddy.com
<~BACK TOP NEXT ~>
 
HTML Tutorials |  CSS Tutorials |  Web Hosting |  Domain Names |  Web Design Resources
Iron Spider © Copyright 2004-2011 Robert Darrell