An Image Alignment Issue

Question

I have the following code:

.aligned {
  display: flex;
  align-items: top;
}

.p {
  padding: 15px;
}

img {
  border: 5px solid #555;
}

blockquote {
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  width: 800px;
  margin: 0.25em 0;
  padding: 0.35em 40px;
  line-height: 1.45;
  position: relative;
  color: #383838;
}

blockquote:before {
  display: block;
  padding-left: 10px;
  content: "\201C";
  font-size: 80px;
  position: absolute;
  left: -20px;
  top: -20px;
  color: #7a7a7a;
}

blockquote cite {
  color: #999999;
  font-size: 14px;
  display: block;
  margin-top: 5px;
}

blockquote cite:before {
  content: "\2014 \2009";
}
img {
  display: block;
  margin: 0 auto;
  max-width: 80%;
  height: auto;
}

@media all and (min-width: 768px) {
  img {
    float: left;
    height: 200px; /* image height for larger screen only */
  }
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" width="370" height="500">
<div class="aligned">
  <div class="p">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
      a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
      vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
      a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
      vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
      a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
      vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
    </p>
    <blockquote>
      Nothing Is Impossible. The Word Itself Says 'IM Possible'
      <cite>Audrey Hepburn</cite>
    </blockquote>

  </div>

So when you run the above code, open it on a new page, you can see the alignment to be messed up

---

That is what my output looks like when I zoom out. I do not want that, is there a way to make it static, meaning even if I zoom out, the output of the above code I sent does not change?

Even if you run the above code, open it on a new page, and zoom out, you can see the text and the image to change its position. However, I want them to be static, meaning not change at all. Any suggestions?

Answer 1

you can try to keep both (image and text) in new div and make new div max width in maximum number so new code will be like

<div class="newdivcontainer">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" width="370" height="500">
<div class="aligned">
  <div class="p">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
      a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
      vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
      a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
      vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
      a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
      vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
    </p>
    <blockquote>
      Nothing Is Impossible. The Word Itself Says 'IM Possible'
      <cite>Audrey Hepburn</cite>
    </blockquote>

  </div>
 

</div>
</div>

and css for the new div will be

.newdivcontainer {
max-width:100%;
width:960px;
display:block;
margin-left:auto;;
margin-right:auto;
}

also make sure inner divs and p tags max width should be 100%; I ma expecting your site is responsive so above code will work fine.