'float-left not working in relative position

I am trying to place my Image on the left side of the div. Anything I try to do to move the Image or the div fail to work. Why is the Image stuck in the center?

I was able to achieve this using flexbox but had to switch to relative positioning because of the Nextjs Image component conflict. In the Image tag you'll see "layout='fill'" which was the root of my problem, but I am unable to rid myself of that piece of code

<div className="relative w-full bg-blue p-4 my-4 rounded-2xl lg:basis-5/12">
    <Image className="float-left mr-4" src={"/"+icon} layout={"fill"} objectFit={"contain"} />
    <div>
        <h3>{ title }</h3>
        <p>
            { paragraph }
        </p>
    </div>
</div>

What I am getting right now: enter image description here

cssnext.jscss-positiontailwind-css


Solution 1:[1]

The float will not work with layout='fill'. Change it to either 'fixed' or 'intrinsic'. I recommend wrapping the Image tag into a div and making the div float. Try something like this.

<div className="bg-blue relative my-4 w-full rounded-2xl p-4 lg:basis-5/12">
      <div className="float-left mr-4">
        <Image src={'/' + icon} layout={'fixed'} height="120" width="120" />
      </div>
      <div>
        <h3>{title}</h3>
        <p>{paragraph}</p>
      </div>
    </div>

And to improvise it. You do not even need to use float. You can achieve same with flex. So if using float is not important you can do something like this

<div className="bg-blue my-4 flex w-full gap-4 rounded-2xl p-4 lg:basis-5/12">
      <Image src={'/' + icon} layout={'intrinsic'} height="120" width="120" alt="" />
      <div>
        <h3>{title}</h3>
        <p>{paragraph}</p>
      </div>
    </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions