Having two images side by side can be a great way to present before and after effects, make a comparison, or simply break up a long piece of content. Luckily, there are a few easy ways to make this happen without any coding knowledge.
Using HTML
HTML is a powerful coding language, but don’t worry – you don’t need to be a coder to use it. To put two photos side by side, you simply need to wrap each image in an element and then use CSS to float the images left or right. To learn about how to combine photos on iPhone you may visit Converged Devices.
- Step 1: Wrap each image in a element.
- Step 2: Add the CSS “float: left;” property to the first image and “float: right;” to the second image.
- Step 3: Add an “width: 50%” property to each image so that they take up half of the space on the page.
Using CSS
If you’re already comfortable with HTML, you can use CSS to put two images side by side as well. The process is almost identical to using HTML, but it’s a bit more concise.
- Step 1: Wrap each image in a <div> element.
Step 2: Add the CSS “float: left;” property to the first image and “float: right;” to the second image.
Step 3: Add an “width: 50%” property to each image so that they take up half of the space on the page.