The issue with the float-left property arises when used within a relative positioning

Why can't I move my Image to the left side of the div? No matter what I try, it stays stuck in the center.

I initially used flexbox to achieve this, but had to switch to relative positioning due to a conflict with the Nextjs Image component. The issue seemed to stem from the "layout='fill'" attribute in the Image tag, which I can't seem to remove.

<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>

Current output can be seen here: https://i.sstatic.net/88lr3.png

cssnext.jscss-positiontailwind-css

Answer №1

When using layout='fill', the float property will not work. Instead, consider changing it to either 'fixed' or 'intrinsic'. One suggestion is to wrap the Image tag in a div and float the div. Here's an example:

<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>

If you want to avoid using float, you can achieve the same result with flex. Here's an alternative approach using flex instead of float:

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I activate a jQuery function only when it is within the viewport?

I have installed a jQuery Counter on my website, but I am experiencing an issue where the counter starts or finishes before reaching the section where the HTML code is embedded. Any assistance with this problem would be greatly appreciated! <script& ...

javascripthtmljquerycsstriggers

What is the best way to contain the CSS for dynamically generated HTML within a div element without impacting other elements on the page?

I am currently facing a challenge where users can input any HTML into a text box, and I need to manipulate that HTML by identifying elements such as anchor tags or divs. To achieve this, I have created a hidden div and copied the pasted HTML into it using ...

javascriptjqueryhtmlcss

Hiding the SVG element with pattern definitions using the 'display: none' property makes the patterns completely disappear from view

When I include a set of SVG definitions at the top of my body, I encounter an issue where the svg tag with zero height and width creates unnecessary space at the beginning of the document. To resolve this, I initially use display:none, but this leads to pr ...

htmlcsssvg

Can we limit the number of items to just two per row in a grid with two columns?

I'm currently facing issues with aligning items within a two-column grid. When looking at this image, you'll notice that the alignment is off. Specifically, 'Example 3' does not align properly with 'Example 4'. This seems to b ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Propelling Information using the Chakra-UI Drawer Element

I've been exploring the features of the Chakra-UI drawer component and you can find more information about it here. Overall, the functionality aligns with my needs, except for one particular aspect - instead of pushing the content to the side, the dra ...

cssreactjschakra-ui

What is the best way to adjust inline svg to the user viewport size?

After working on integrating my interactive SVG maps into my HTML pages, I encountered a minor issue: when inserting my inline SVG into a standard, non-responsive HTML document, it automatically adjusts itself to fit nicely within the user's viewport. ...

htmlcsstwitter-bootstrapsvgsnap.svg

Using environment variables in next.config.js allows for successful connection to the database, however, when attempting to use a

Utilizing the serverless-mysql library, I have successfully connected my next app to a remote MySQL DB through an SSH tunnel with the ssh2 library. Although everything is functioning properly, I am looking to enhance the security of my code by removing the ...

javascriptmysqlnext.js

How to ensure a list item remains in a fixed position when resizing the window

Imagine a scenario where there is an unsorted list within a resizable div element. The list is set up horizontally and aligned to the right, with one item designated as "special" and given the id="pinned". Using only CSS, can you keep the #pinned item in ...

htmlcsslayout

Guide on how to display the next/image on a public IP domain

Hello, I am facing an issue with getting the src URL image using next/image. I have already set it up in next.config.js but I am still encountering errors. Here is my code: index.js <Image src={'http://110.100.190.222:9790/images/'+item.artic ...

next.jsnext-images

What can be done to repair the gallery on this webpage?

Currently, I am experimenting with the Aria template, a free Bootstrap-based template. My goal is to utilize the gallery feature without any accompanying text. However, even after removing the text from the lightbox, the white background persists. What I s ...

jquerycssbootstrap-4gallery

Oops! Issue encountered: Attempting to access properties of null object (specifically 'map')

<div className="flex flex-col md:flex-row gap-y-2 md:gap-x-2 items-center"> {post.categories.map((category) => ( <div className="bg-[#f7ab0a] text-center text-black px-3 py-1 rounded-full text-sm font-se ...

reactjsnext.js

Is there a way to make my item reach a height of 100%?

I've created a unique Wordpress theme and I'm looking to make an element 100% height to fill the remaining available space. Here is the HTML code snippet: <header id="masthead" class="navbar navbar-default" role="banner" style=" backgrou ...

htmlcsstwitter-bootstrap

Restricting the number of lines within a paragraph in Angular 2

Is there a method to limit the number of lines in a <p> tag and add an ellipsis (...) at the end? Using character count for truncation doesn't work well as the width of the element varies according to device screen size. ...

javascripthtmlcssangular

Ensure that the dropdown <select> remains open even while filtering through options

I am currently working on implementing a mobile-friendly "filtered dropdown" design: https://i.sstatic.net/SYjQO.png Usually, a <select> control remains closed until the user clicks to open it. Is there a straightforward way to keep it always open ...

cssvue.jsdrop-down-menumobile-website

how to obtain the lineHeight property in UITextView

I am trying to calculate the line height in UITextView for my app. I have used the sizeWithFont:constrainedToSize:lineBreakMode: method, but it seems to give me the height of all lines in the textview. I heard about the Three20 library, but I am not sure h ...

ipaduitextviewthree20css

Executing scripts during the build process in Next.js

Is there a recommended way to execute a script that creates static XML files during the build process? It would be ideal if these scripts were ES Modules so I can share code between them and my Next/React application. I believe I might need to customize t ...

reactjswebpacknext.js

Alter the class of the div element every three seconds

Greetings, I trust everyone is doing well. I am in need of some assistance from your brilliant minds. I have a circular div along with three CSS classes, and my objective is to switch the div's class and update the label text every 3 seconds. Any insi ...

javascripthtmlcss

Getting elements to vertically align in the center and have matching heights using Bootstrap

Does anyone have experience with vertical aligning in Bootstrap using flex box classes like align-items-center? I'm struggling to vertically center the text content in the boxes of the codepen provided below while ensuring each box matches the height ...

csstwitter-bootstrapbootstrap-4

What strategies can I implement to ensure my modal dialog box remains responsive? Adjusting the window size causes the modal box to malfunction and lose its structure

Whenever I adjust the size of the browser window, the elements inside the modal box become misaligned. HTML <div class='modal'> <div class='modal-content'> </div> </div> Below is the CSS for the modal ...

javascripthtmlcss

Achieving full child div coverage within a bordered parent div on Chrome

I am encountering an issue where I am trying to insert an image into a bordered div, but in Chrome 96.0 there are unexpected margins appearing from the top and left that I cannot seem to remove. Below is the code I am using: .wrapper { width: 36px; ...

javascripthtmlcss