How to Align Three Pictures Next to Each Other in HTML

Save

When you add images to your Web site, they don’t always align where you want. They may jump to another line, or beside text. The more images you have on a single line, the less space you have. It’s best to check your layout in the browser even if it looks fine in your Web editor. You can float images next to each other by styling your HTML. The "float:left" property allows you to move elements towards the left side of a Web page.

  • Start a text editor, such as Notepad, TextPad or WordPad. Select “File” and “Open” from the menu. Find, and double-click the HTML file you want to modify.

  • Add the following code between the <HEAD> tag of your page. The current code gives each image a 33% width. To change the width, change "33%" to a different value, such as the dimensions of your image. The code, "Padding-right:5px;" adds a five pixel spacing to the right of each image. To use a different spacing, change "5px;" to a different number. To add padding to the left of the image, change "padding-right" to "padding-left."

    <style type="text/css">
    <!--
    img.left { float:left;
    padding-right:5px;
    width:33%;
    }
    img.middle { float:left;
    padding-right:5px;
    width:33%;
    }
    img.right { float:left;
    padding-right:5px;
    width:33%;
    }
    -->
    </style>

  • Add the following code between the <BODY> tag where you want the three images to go. Replace “leftimage.gif,” “middleimage.gif” and “rightimage.gif” with the names of your images.

    <div>
    <img src="leftimage.gif" class="left" alt="image description" />
    <img src="middleimage.gif" class="middle" alt="image description" />
    <img src="rightimage.gif" class="right" alt="image description" />
    </div>

Promoted By Zergnet

Comments

You May Also Like

Related Searches

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!