Solution 1 :

Another simple way to do this is by using the float property in CSS. This is essentially text wrapping. You cannot do it by just putting the text next to the img tag because the image itself would have a height and would by default be taken as a block to display. Hence you will have to use a p tag and wrap the text around the image.

img.two {
  height: 50%;
  width: 50%;
  float:left; /* this is the property you want to set*/
}
p{
  color:red;
}
<p class="text-wrap"><img class="two" src="https://www.webkit.org/blog-files/acid3-100.png" > Sample text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in dictum quam. Etiam mauris nisl, eleifend sed porttitor eget, ultricies porta mi. Cras nec vehicula sapien. Sed lacinia tempus dignissim. Maecenas consequat nulla eu elit fermentum, sed pulvinar lacus eleifend. Vivamus at dictum dolor. Cras eget iaculis diam, ac tempor diam. Duis tincidunt aliquet nisi et tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec semper nulla et lacus malesuada consequat eu id eros.

Quisque sit amet rutrum neque, facilisis volutpat ligula. Aenean cursus urna non molestie maximus. Sed ligula orci, condimentum eget molestie ac, vehicula consectetur dui. Sed velit augue, pellentesque ultrices ipsum et, cursus rhoncus justo. Nunc maximus tortor nec dolor viverra, nec gravida orci varius. Donec imperdiet magna ac libero tempor vulputate. Proin ut magna aliquet, volutpat magna a, mattis sapien.

Praesent eleifend fermentum imperdiet. Donec non sem ligula. Phasellus at luctus neque. Cras nec eros non odio imperdiet bibendum vestibulum a tellus. Vivamus sit amet porttitor felis. Nullam dignissim, eros ac pretium volutpat, lacus dui facilisis eros, vel finibus purus purus eget turpis. Etiam sodales risus a mauris viverra congue. Duis congue fringilla ligula, vel auctor nunc porta eu. Fusce bibendum, dolor at semper interdum, sem justo dapibus ipsum, vel euismod ligula eros et turpis.</p>

Solution 2 :

you can use grid layout for this:

.container {
  display: inline-grid;
  grid-template-columns: 10% auto;
  grid-column-gap: 10px;
  width: 100%;
}

img.two {
  width: 100%;
}
<div class="container">
  <img class="two" src="https://images.unsplash.com/photo-1584125970258-ea3da734d03a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80" />
  <p>Sample text </p>
</div>

Solution 3 :

You can use flexbox and try like this:

HTML:

<div class="cover">
 <div class="img">
  <img class="two" src="./img/project-structure.png" > 
 </div>
 <div class="text">
   <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum ab voluptatibus deserunt, officiis corrupti sapiente asperiores in officia cupiditate temporibus fuga eligendi delectus provident reprehenderit aut at beatae repellat ullam.</span>
 <span>Fugit ipsam praesentium, aperiam amet maiores repellendus provident quos, dolorem repellat perspiciatis vitae! Possimus expedita distinctio, asperiores incidunt magnam, voluptatem aspernatur eum dolorem at totam quasi, quos, odit aperiam fugiat.</span>
 <span>Doloremque id voluptatibus maxime ipsum veritatis accusamus beatae ipsam velit numquam corporis dolorum est, cupiditate voluptates natus, rerum similique, voluptatum eum quisquam necessitatibus consectetur voluptas ducimus rem repellat quod ad?</span>
 <span>Fugit natus amet, id eum. Voluptates tenetur doloremque, dolorum modi reprehenderit beatae labore eligendi accusantium odio nulla fugit vitae, enim assumenda. Quod aut perferendis numquam quisquam, laborum sequi reprehenderit dolorum?</span>
 <span>Consequuntur numquam impedit, reprehenderit consequatur asperiores magnam voluptas doloribus architecto. Temporibus ratione officia sapiente fugit, vitae adipisci alias harum aspernatur earum, quod velit explicabo a, quia magni sunt voluptatum nostrum.</span>
 <span>Aspernatur veritatis tenetur, impedit, beatae mollitia harum cumque laborum quas quibusdam voluptas unde nulla ad eligendi quod optio quia, ipsa. Quas dignissimos saepe neque aliquid quaerat quibusdam placeat illum enim.</span>
 <span>Iure corporis ipsum aut numquam quaerat sequi praesentium repellat, culpa tempore quis, modi laborum minus dolorem commodi animi atque minima dolorum nobis repudiandae. Ea dolorem quidem, nam harum, debitis ex!</span>
 <span>Quae suscipit dolor ex eius tempora nobis error, incidunt, harum minima explicabo quis id, dolorum alias commodi vitae non minus adipisci officia nihil delectus accusantium libero! Sapiente at, adipisci aut?</span>
 <span>Error repellat ipsa ad, earum cupiditate corporis est a reprehenderit, cum modi deserunt, sit dolores repudiandae. Vel saepe voluptatibus labore, sapiente unde dolorem, obcaecati libero quae ea reiciendis? Libero, provident.</span>
 <span>Alias recusandae distinctio eos magnam. Quas natus dignissimos odit qui id consectetur doloribus animi ab explicabo iure, dolor deserunt, odio eaque illo velit! Beatae, soluta totam deleniti. Dignissimos, reprehenderit earum?</span></p>
 </div>

CSS:

.cover{
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      flex-wrap: wrap;
    }

    .img{
      flex-basis: 10%;
    }

    .text{
      flex-basis: 90%; 
    }

Problem :

I am trying to put an image on the left and text to start on the right ,just the same hight as the image starts.Here is my code
for the style :

img.two {
    height: 10%;
    width: 10%;
 }
<img class="two" src="https://www.webkit.org/blog-files/acid3-100.png" >Sample text

However the “SampleText” gets on bottom of the image not on top.

Comments

Comment posted by Joel

Oh yes sorry , I will fix in that in the code above.

Comment posted by Joel

Seems like the next

also gets aligned to the right just below that text and I don’t want that 🙁

Comment posted by Y4glory

@Joel Can I know which div?

Comment posted by Joel

This seemed to work for me .Lots of text get aligned correctly and the html code that follows is

tag does not affect the code above

Comment posted by answer

if it fixes your issue please accept it as

Comment posted by Elman Huseynov

@Joel you are welcome! please do not forget to tick green then =)

Comment posted by Joel

However it seems that if I put a lot of text instead of “Sample Text” , the text goes below the image.Any solution to that?

By

Leave a Reply

Your email address will not be published. Required fields are marked *