Html - bring image besides headline on the left & right side in tailwind css without using flexbox?

deadcoder0904
May 23, 2023
305 views
0 votes
2 Answers

I want to bring the image next to my headline. It shouldn’t take up headline space but should be beside it.

Either the left side or the right side. specifically, the square image should be where I have shown the black circle. Just beside the headline.

I can’t use Flexbox here.

I also don’t want to use absolute positioning since I have 20+ images I have to show on the landing page.

I have a working code for absolute positioning but it requires lots of calculation. specifically, I have to calculate translate-y from top so there’s lots of translate-y-[20%], translate-y-[139%], etc…

I also mostly cannot change the layout since I use @tailwind/typography which requires a specific layout.

Every child should be below .prose class.

I have img just below h2 that I want to be on the side of h2, either the left or right side, alternatively.

the code looks like this:

<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com"></script>


<!-- Body -->
<main class="flex min-h-screen bg-gray-900">
  <div class="grid grid-cols-[1fr,min(70ch,calc(100%-64px)),1fr] gap-8 overflow-auto p-8 [&>*]:col-start-2">
    <div class="prose grid grid-cols-[70px_1fr_70px] border-8 border-red-400 bg-gray-100 [&>*]:col-start-2">
      <h2>this is my first headline</h2>
      <img class="h-32 w-32" src="https://picsum.photos/300/300?blur" alt="temp img 1" />
      <p>i want to make the image come besides the headline</p>
      <p>i don't want to use absolute positioning unless</p>
      <p>i can make sure the images come on the side of headline</p>
      <p>i have a landing page with 20+ images</p>
      <p>and i want them on the left & right side of each `h2` tag</p>
      <p>they must not overlap with `h2` but be on the edges of the red border</p>
      <h2>this is my second headline</h2>
      <img class="h-32 w-32" src="https://picsum.photos/200/200?blur" alt="temp img 2" />
      <p>i want the first image on the right side</p>
      <p>and the second one on the left side</p>
      <p>how do i do it?</p>
      <p>i tried using translate-x & relative positioning with no luck</p>
      <p>i want it to be in a way that i don't have to use top-[300px] or some random position</p>
      <p>i don't want to keep calculating</p>
      <p>ideally, i'd love to keep the same structure of `h2` & `img` as siblings</p>
      <p>if its not possible, i'd love to have a `h2` & `img` wrapped in a `div`</p>
      <p>or better version would be `img` (absolute) wrapped inside `h2` with a `relative` position</p>
    </div>
  </div>
</main>

I have shown 2 images but I have 20+ images in my actual landing page.

I have also given an explanation within the code itself.

the demo can be seen on tailwind play → https://play.tailwindcss.com/oxshT4UNKX (edit code & click share to share the latest version)

I want to avoid calculation if at all possible in a way that the image stays on the left & right sides of the red border.

how do I do it without changing the layout?

I think div.relative.flex > {h2,img} would be a worse layout but h2.relative > img.absolute would be much better to work with @tailwind/typography

Answers

Chosen as BEST ANSWER

i changed the layout to not use grid & found a solution quickly that doesn't depend on absolute positioning.

<main class="flex min-h-screen bg-gray-900">
  <div class="dark:prose-light prose prose-lg mx-auto my-4 max-w-[750px] overflow-auto rounded-lg border-8 border-red-400 bg-gray-100 px-24 py-16">
    <h2 class="relative">
      this is my first headline
      <img class="absolute -right-44 -top-24 z-10 h-32 w-32" src="https://picsum.photos/300/300?blur" alt="temp img 1" />
    </h2>
    <p>i want to make the image come besides the headline</p>
    <p>i don't want to use absolute positioning unless</p>
    <p>i can make sure the images come on the side of headline</p>
    <p>i have a landing page with 20+ images</p>
    <p>and i want them on the left & right side of each `h2` tag</p>
    <p>they must not overlap with `h2` but be on the edges of the red border</p>
    <h2 class="relative">
      this is my second headline and it works like the best thing in the world
      <img class="absolute -left-44 -top-20 z-10 h-32 w-32" src="https://picsum.photos/200/200?blur" alt="temp img 2" />
    </h2>
    <p>i want the first image on the right side</p>
    <p>and the second one on the left side</p>
    <p>how do i do it?</p>
    <p>i tried using translate-x & relative positioning with no luck</p>
    <p>i want it to be in a way that i don't have to use top-[300px] or some random position</p>
    <p>i don't want to keep calculating</p>
    <p>ideally, i'd love to keep the same structure of `h2` & `img` as siblings</p>
    <p>if its not possible, i'd love to have a `h2` & `img` wrapped in a `div`</p>
    <p>or better version would be `img` (absolute) wrapped inside `h2` with a `relative` position</p>
  </div>
</main>

the h2 contains the img which i've made absolute while h2 is relative... then i used top, left, & right to position themselves.

the tailwind play is here → https://play.tailwindcss.com/yWhtSK9dYX

(Edit)

If you wanted to keep the grid layout, you could modify the grid column tracks such that there is sufficient width for the images, and then position the headings and images as desired:

<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>


<!-- Body -->
<main class="flex min-h-screen bg-gray-900">
  <div class="grid grid-cols-[1fr,min(70ch,calc(100%-64px)),1fr] gap-8 overflow-auto p-8 [&>*]:col-start-2">
    <div class="prose grid grid-cols-[70px_calc(theme(spacing.32)-70px)_1fr_calc(theme(spacing.32)-70px)_70px] border-8 border-red-400 bg-gray-100 [&>*]:col-start-2 [&>*]:col-span-3 grid-flow-dense">
      <h2 class="!col-start-2 !col-span-2">this is my first headline</h2>
      <img class="h-32 w-32 !col-start-4 !col-span-2" src="https://picsum.photos/300/300?blur" alt="temp img 1" />
      <p>i want to make the image come besides the headline</p>
      <p>i don't want to use absolute positioning unless</p>
      <p>i can make sure the images come on the side of headline</p>
      <p>i have a landing page with 20+ images</p>
      <p>and i want them on the left & right side of each `h2` tag</p>
      <p>they must not overlap with `h2` but be on the edges of the red border</p>
      <h2 class="!col-start-3 !col-span-2">this is my second headline</h2>
      <img class="h-32 w-32 !col-start-1 !col-span-2" src="https://picsum.photos/200/200?blur" alt="temp img 2" />
      <p>i want the first image on the right side</p>
      <p>and the second one on the left side</p>
      <p>how do i do it?</p>
      <p>i tried using translate-x & relative positioning with no luck</p>
      <p>i want it to be in a way that i don't have to use top-[300px] or some random position</p>
      <p>i don't want to keep calculating</p>
      <p>ideally, i'd love to keep the same structure of `h2` & `img` as siblings</p>
      <p>if its not possible, i'd love to have a `h2` & `img` wrapped in a `div`</p>
      <p>or better version would be `img` (absolute) wrapped inside `h2` with a `relative` position</p>
    </div>
  </div>
</main>

Otherwise, you could float the images:

<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>


<!-- Body -->
<main class="flex min-h-screen bg-gray-900">
  <div class="grid grid-cols-[1fr,min(70ch,calc(100%-64px)),1fr] gap-8 overflow-auto p-8 [&>*]:col-start-2">
    <div class="prose border-8 border-red-400 bg-gray-100 px-[70px]">
      <img class="h-32 w-32 float-right -mr-[70px]" src="https://picsum.photos/300/300?blur" alt="temp img 1" />
      <h2>this is my first headline</h2>
      <p>i want to make the image come besides the headline</p>
      <p>i don't want to use absolute positioning unless</p>
      <p>i can make sure the images come on the side of headline</p>
      <p>i have a landing page with 20+ images</p>
      <p>and i want them on the left & right side of each `h2` tag</p>
      <p>they must not overlap with `h2` but be on the edges of the red border</p>
      <img class="h-32 w-32 float-left -ml-[70px]" src="https://picsum.photos/200/200?blur" alt="temp img 2" />
      <h2>this is my second headline</h2>
      <p>i want the first image on the right side</p>
      <p>and the second one on the left side</p>
      <p>how do i do it?</p>
      <p>i tried using translate-x & relative positioning with no luck</p>
      <p>i want it to be in a way that i don't have to use top-[300px] or some random position</p>
      <p>i don't want to keep calculating</p>
      <p>ideally, i'd love to keep the same structure of `h2` & `img` as siblings</p>
      <p>if its not possible, i'd love to have a `h2` & `img` wrapped in a `div`</p>
      <p>or better version would be `img` (absolute) wrapped inside `h2` with a `relative` position</p>
    </div>
  </div>
</main>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – bring image besides headline on the left & right side in tailwind css without using flexbox?

Answers