How to Align Images Side By Side Using Html & CSS

To align images in a horizontal way or said to be side by side is very simple task, so in this article by P4Pakao, you will learn about how to place imabes side by side in Blogger.

Method One To Align Images Side By Side

Html Code

<div class="row">
  <div class="column">
    <img src="img1.jpg" alt="P4Pakao" style="width:100%">
  </div>
  <div class="column">
    <img src="img2.jpg" alt="P4Pakao" style="width:100%">
  </div>
</div>

CSS Code

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 50%;
  padding: 5px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

Method Two To Align Images Side By Side Using Inline CSS

<div style="display: flex;">
  <div style="flex: 1 1 50%; padding: 5px;">
  <img src="img1" alt="P4Pakao" style="width: 100%;" /></div>
  <div style="flex: 1 1 50%; padding: 5px;">
    <img src="img2"alt="P4Pakao" style="width: 100%;" /></div>
  </div>

Method Three To Align Images Side By Side Using As many Images

So, if you want to display many images in one line. So in the above case we display two images side by side, if we want to display three images side by side, so we change flex:50% to 33%

<div style="display: flex;">
  <div style="flex: 1 1 33%; padding: 5px;">
  <img src="img1">alt="P4Pakao" style="width: 100%;" /></div>
  <div style="flex: 1 1 33%; padding: 5px;">
    <img src="img2"alt="P4Pakao" style="width: 100%;" /></div>
  </div>

Method Four To Align Images Side By Side Using As many Images

Html Code

<div class="row">
  <div class="column">
    <img src="img1.jpg" alt="P4Pakao" style="width:100%">
  </div>
  <div class="column">
    <img src="img2.jpg" alt="P4Pakao" style="width:100%">
  </div>
</div>

CSS Code

* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

.column {
  flex: 50%;
  padding: 5px;
}