How to align an image with text such that image sits at top right while text surrounds it in CSS?

user_8176451 0
Viewed 32

I am trying to create a combination of image text layout like this: enter image description here

And the result should look something like this: enter image description here

I am not sure how to achieve this. I tried using a grid but the grid would mean splitting the text into two elements and then parsing it however ideally I want the text to take all of the area left and the image to take the top right area and it should be responsive.

Can someone help me out here?

Here's the code that I tried:

<div className='w-4/5 FlashElementGrid h-4/5'>
      <div className='border border-red-600 FlashElement_Picture'>Picture</div>
      <div className='border border-red-600 FlashElement_Text_1'>Text 1</div>
      <div className='border border-red-600 FlashElement_Text_2'>Text 2</div>
    </div>

.FlashElementGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.FlashElement_Picture {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.FlashElement_Text_1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.FlashElement_Text_2 {
  grid-column: 1 / -1;
  grid-row: 2 / 3;
}

This works however I don't want three elements instead I want two elements where image goes top right and text spans into rest of the area.

css
1 Answers

You can make the image float on the right using float css property. Margin is used to keep distance outside the image border so the text does not overlap.

.image  {
float: right;    
 margin: 0 0 0 15px;
}
<div>
    <img src="some.jpg" alt="" width="200" height="200" class="image"/>
    <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

user_66824060
Related