Align Images Side by Side in HTML

How TO - Align Images Side By Side

You could try to implement styling as below:

div {
  display: flex;
  flex-wrap: wrap;
}
img {
  flex: 1 0 20%;
  width: 20%;
  margin: 5px;
}

<div>
  <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/>
  <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/>
  <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/>
  <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/>
  <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/>
  <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/>
</div>

How to place images side by side within a fixed width div

Add display: flex to #attachments and display: inline-block to .attachment. You will also need overflow-x: scroll for the horizontal scroll bar.

#attachments {
  display: flex;
  max-width: 290px;
  height: 200px;
  overflow-x: scroll;
}

.attachment {
  display: inline-block;
}

CodePen Example

How to align image and form side by side and it should also be perfectly aligned even in different views like mobile view and desktop

You have your primary box container set to position: absolute and several positioning attributes that are not present on the image which is probably why everything is shifting. I don't know what else this form and image are going to be put into but they don't seem necessary in your example so I've removed them and added a flexbox .flexContainer to wrap your content in and that helps keep your content aligned in a single row. You could take it a step further and add a @media query (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to control how the image reacts on mobile (for example, change the flex-direction to column so the image appears below the contact box instead of stretching inward on smaller screens.
`

.flexContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

img {
  width: 100%;
  height: auto;
  height: 475px;
  cursor: pointer;
}

span {
  content: "\27F6";
}

label {
  padding-left: 10px;
  font-size: 16px;
  padding-top: 10px;
}

.box {
  height: 475px;
  background: green;
  padding: 40px;
  box-sizing: border-box;
  margin-left: 1%;
  cursor: pointer;
}

.box p {
  font-family: 'jmsans', sans-serif;
  padding: 0;
  margin: 0 0 40px;
  color: white;
  font-size: 40px;
  width: 467px;
}

.box input {
  margin-bottom: 30px;
  width: 466px;
  box-sizing: border-box;
  box-shadow: none;
  border: none;
  border-bottom: 2px solid #999;
  outline: none;
  padding-left: 10px;
  font-weight: bold;
  height: 56px;
}

.box input[type="submit"] {
  border-bottom: none;
  cursor: pointer;
  color: #fff;
  margin-bottom: 0;
}

.box form div {
  position: relative;
}

.box form div label {
  position: absolute;
  top: 10px;
  left: 0;
  color: #999;
  transition: 0.5s;
  pointer-events: none;
}

<div class="flexContainer">
  <div class="box">
    <p>contact us</p>
    <form>
      <div>
        <input type="text" name="" required="">
        <label>firstname</label>
      </div>
      <div>
        <input type="text" name="" required="">
        <label>last name</label>
      </div>
      <div>
        <input type="text" name="" required="">
        <label>mail</label>
      </div>
      <div class="button">
        <button type="button">submit <span>⟶</span></button>
      </div>

    </form>
  </div>

  <div>
    <img src="https://www.fnordware.com/superpng/pnggrad8rgb.png">
  </div>
</div>

align 2 images side by side and make their caption underneath them

Here's an updated solution, though not the most elegant, but I tried to keep as much of your original markup and css as possible. I also added a media query for smaller screens. This solution uses static widths in order to have some parity between the two photos....I don't think using img is ever going to give you the desired result.

Make sure to run 'full page'...there is a media query in there that will stack images in smaller viewports.

 .container {
            display: inline-flex;
        }

        @media (max-width: 900px) {
            .container {
                display: flex;
                flex-direction: column;
            }
        }

        #img-div1 {
            background: white;
            margin: 0 24px;
            background-image: url("https://www.wearethemighty.com/app/uploads/legacy/assets.rbl.ms/17317425/origin.jpg");
            background-size: cover;
            width: 550px;
            height: 300px;
        }

        #img-div2 {
            background: white;
            margin: 0 24px;
            background-image: url("https://arc-anglerfish-arc2-prod-advancelocal.s3.amazonaws.com/public/MIE5YDG625EFNGPHMVLSL3JDKM.jpg");
            background-size: cover;
            width: 550px;
            height: 300px;
        }

        #img-caption {
            margin: 10px 0 5px 0;
            text-align: center;
        }

        @media (max-width: 460px) {
            #img-caption {
                font-size: 1.4rem;
            }
        }

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
   
</head>

<body>

    <div class="container">
        <figure>
            <div id="img-div1">
            </div>
            <div id="img-caption">
                A drawing for Sadam husain represents the period of his reign.
            </div>
        </figure>
        <figure>
            <div id="img-div2">
            </div>
            <div id="img-caption">
                Sadam husain inside the court.
            </div>
        </figure>
    </div>
</body>

</html>

---

Related Topics