htmlcsspositionsections

How can i make the image on the right of the text

i would like to have the text on the left, then the image on the right and reduce the volume (height and weidth of img) . enter image description here

Solution

  • You can use a float, if you want the text to wrap around the image.

    img {
  width: 250px;
  float: right;
  margin: 0 0 1em 1em;
}
    <img src="https://picsum.photos/900/600">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie justo ut quam luctus, quis maximus magna molestie. Aliquam volutpat molestie libero id finibus. Praesent placerat lacinia diam eget tempor. Praesent nisl tortor, maximus ac cursus ac, pellentesque ut ipsum. Donec convallis viverra ullamcorper. Nullam maximus faucibus orci. Donec eget augue gravida, sodales velit sit amet, placerat massa. Etiam iaculis eu dui id luctus. Quisque semper, purus quis elementum cursus, urna arcu vehicula erat, sed accumsan sapien felis in nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vehicula enim ante, eu suscipit magna vestibulum quis. Sed hendrerit elementum enim, quis porta eros tempus quis. Donec semper erat at viverra blandit. Fusce mattis consectetur augue, nec tincidunt dui varius sed.</p>

    Or you can use a grid, if you want to have content displayed side-by-side.

    .d1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}
.d1 img {
  max-width: 100%;
}
    <div class="d1">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie justo ut quam luctus, quis maximus magna molestie. Aliquam volutpat molestie libero id finibus. Praesent placerat lacinia diam eget tempor. Praesent nisl tortor, maximus ac cursus ac, pellentesque ut ipsum. Donec convallis viverra ullamcorper. Nullam maximus faucibus orci. Donec eget augue gravida, sodales velit sit amet, placerat massa. Etiam iaculis eu dui id luctus. Quisque semper, purus quis elementum cursus, urna arcu vehicula erat, sed accumsan sapien felis in nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vehicula enim ante, eu suscipit magna vestibulum quis. Sed hendrerit elementum enim, quis porta eros tempus quis. Donec semper erat at viverra blandit. Fusce mattis consectetur augue, nec tincidunt dui varius sed.</p>

  <div><img src="https://picsum.photos/900/600"></div>
</div>