How to Insert Two Images Horizontally With HTML

Save

In HTML, you need to embed images using the <img> tag and then style them using Cascading Style Sheet (CSS) code. You can line up images in a horizontal row by "floating" them, but you need to keep floated images from breaking your Web page layouts. Adding a <div> tag around the images helps keep them in their place. After aligning the images, use CSS to add spacing and other styling to the images. This technique is useful for creating image gallery pages.

  • Add an <img> tag for each image in your HTML document. Place each <img> tag on its own line but still adjacent to the others. Use the "src" attribute to define the file path -- the Web address -- to each image, like so:

    <img src="path/to/image1.png">
    <img src="path/to/image2.png">

  • Save your HTML file and check it in the browser. If your site is already live on a Web server, remember to upload both the updated HTML file plus both of your images. Both images should already line up side-by-side. This happens because, although you put each <img> tag on its own line, you did not wrap them in <p> tags to create paragraphs or add a
    tag to break lines. Sometimes your CSS code will cause the images to not display side-by-side, though. You will also need CSS to space the images.

  • Edit the CSS of your Web page to make sure the images always line up horizontally. Add the CSS code to an external CSS file or between <style> tags, which go between the <head> tags at the top of your HTML document. Here is example code:

    img {float: left; margin-right: 10px; margin-bottom: 10px;}

    The above code "floats" each instance of the <img> tag to the left of whatever is adjacent on the page. Anything to the right of a left-floated tag wraps around the floated item. Add padding or margins to space the images.

  • Wrap the <img> tags with a <div> tag and give the <div> tag an ID attribute. Name the ID attribute something unique and meaningful. Here is an example:

    <div id="images">
    <img src="path/to/image1.png" />
    <img src="path/to/image2.png" />
    </div>

  • Write the following CSS code to keep your floated images from "floating up" into other content:

    images {clear: both;}

    You can also change your CSS code to float only images found between <div> tags with an ID of "images" like so:

    images img {float: left;}

Tips & Warnings

  • Learn the CSS box model to better understand how to position images, text and more on your Web pages. The box model describes how the sizes and borders of HTML images are calculated by browsers.
  • Always back up your HTML and CSS files when editing Web pages.

References

  • Photo Credit Dynamic Graphics Group/Dynamic Graphics Group/Getty Images
Promoted By Zergnet

Comments

Resources

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

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