Guide to creating a web site, web design, web development, internet marketing, promotion, html tips and tricks, javascript and more.

Your Guide to Professional
Web Site Design and Development

HTML Tips
HTML Codes
Web Development
Web Design Tips
JavaScript Codes
216 Web Safe Colors
CSS Tutorial
JavaScript Tutorial
ASCII Character Codes

Offering Free HTML Tips, Tags and Codes

Open Directory Projectfree ebooksfree articles
web site design development internet marketing and promotion tutorials

| Web Site Development | HTML Codes | HTML Tips | Web Design TipsJavascript Snippets | 216 Safe Colors | Symbols | CSS Tutorial | JavaScript Tutorial |

webmaster resources

Creating an HTML Vertical Rule - Line Divider

If you're looking for a way to add an HTML vertical rule or line divider to your web page, you have most likely discovered that this isn't possible with HTML code. However, you can do so using an image.

In addition, you can also use an image to create a horizontal rule within your HTML code.


The image below, which looks like this (a tiny blue dot): is a 2 pixel by 2 pixel image. This single image can be used to create an HTML  vertical or horizontal line within your web page simply by changing the HTML image code HEIGHT and WIDTH attributes.

Note: In order for this HTML code to work properly, you will need to create an image that is 2 pixels by 2 pixels in size and upload it to your web server. You will then need to link to the image within your HTML image code.

If you'd like to use the image in this example, you're welcome to copy it.

Here's how:

Place your mouse pointer over the little blue dot (enlarged to assist you) below. Right click, and go to 'Save Picture As.' A window will load and enable you to select the folder on your computer in which you'd like to save the image.

Here's the image:



<IMG SRC="image.gif" WIDTH="2" HEIGHT="2" BORDER="0">


<IMG SRC="image.gif" WIDTH="200" HEIGHT="2" BORDER="0">


<IMG SRC="image.gif" WIDTH="200" HEIGHT="5" BORDER="0">


<IMG SRC="image.gif" WIDTH="2" HEIGHT="200" BORDER="0">


<IMG SRC="image.gif" WIDTH="5" HEIGHT="200" BORDER="0">

Edit the text indicated in bold to suit your needs.

HTML vertical rules provide a great way to divide your web page contect areas and add a bit of color to your web page.



Submit your HTML code snippets. We'll credit you and give you a link to your website.