Tips on positioning images to the left and right without causing text to wrap around them

I have successfully floated an image to the left of text with the following CSS. How can I achieve a similar effect with an image to the right of text on the same page? Do I need to use a clearfix between the left and right images?

Thank you!


.innercontent {
    padding: 0 185px 0 0;
    position: relative; 
    text-align: justify;
}

.innercontent img {
    right: 0;
    position: absolute;
    top: 0;
}

<div class="innercontent">
     <p>Lorem ipsum dolor sit amet....</p>
     <img src="/media/18/tractor_150.jpg" alt="tractor" width="150" height="107" />
</div>
htmlcssimagecss-float

Answer №1

Enhancing the specificity of CSS is essential. One approach is to establish a master superclass, like .fl and .fr for float left and float right respectively. Implementing these classes as needed not only streamlines the code but also improves readability throughout the HTML document. .innercontent img.fl{ padding: 0 0 0 185px; position: relative; text-align:justify; }

.innercontent img {
    left: 0;
    position: absolute;
    top: 0;
}

<div class="innercontent">
     <img src="/media/18/tractor_150.jpg" alt="tractor" width="150" height="107" />
     <p>Lorem ipsum dolor sit amet....</p>
</div>

If there's any confusion, feel free to reach out! :D

Answer №2

To display both elements side by side, I recommend floating them to the left.

[HTML] (Img on the left)

<div class="innercontent">
   <img class='floatLeft' />
   <p class='floatLeft'>Lorem ipsum dolor sit amet....</p>
   <div class='cleaner'></div>
</div>

(Img on the right of text)

<div class="innercontent">
    <p class='floatLeft'>Lorem ipsum dolor sit amet....</p>
    <img class='floatLeft' />   
    <div class='cleaner'></div>  
</div>

[CSS]

.cleaner{clear: left; line-height: 0; height: 0;} 
.floatLeft{float: left;}

The cleaner element helps position the next item after a floated element back in its place. It's good practice to use it after floating elements, especially when mixing with non-floated elements.

You may also need to specify direct floating for images in the CSS like this:

.floatLeft>img{float: left;}

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

Concatenating strings with JavaScript

I am currently working on building a web page using a combination of html and javascript. I have a json file that provides inputs for some specific content I need to display. My main goal is to set up an address variable in order to show the Google Maps AP ...

javascripthtmljsongoogle-maps

The data in MongoDB is organized using unique identifiers called ObjectId

I am currently working on a MEAN Crud project and encountering some issues. Despite the data being received in the mongodb, it is displaying as an objectId instead of the actual content. You can see this issue in the image below: https://i.stack.imgur.com ...

htmlangularjsnode.jsmongodbexpress

Obtain data from a local JSON file using the http.get() method in Angular 2

I am attempting to utilize the http.get() method in Angular 2 to load a local JSON file. I followed a suggestion from Stack Overflow that involves modifying my app.module.ts: In this example, I have imported the HttpModule and the JsonModule from @angular ...

javascripthtmljsonangularhttp

What is the best way to eliminate existing double quotation marks within string values stored in objects in Angular?

When using Angular, data is retrieved in object form from the database to the backend and then to the frontend. Here's how it looks in HTML: <h3>Payslip for the month of {{dataout[0].MonthYear | json }}</h3> The issue arises when running ...

htmljsonangularobject

The background color of the CSS div tag does not cover the entire axis

I'm facing a dilemma in my CSS design that's got me stuck. This issue also seems to be present in this forum: Whenever I zoom in on the page, I noticed that the header background doesn't fully extend across the screen horizontally. Here&apo ...

htmlcss

Learn how to use jQuery to dynamically insert a table inside a div element in HTML, specifically for jQuery

Currently, I am attempting to incorporate HTML code through JQuery Ajax. I possess an HTML form (jQuery mobile) where data gets sent to a PHP file upon clicking the submit button using JQuery Ajax. The PHP file then responds with JSON data structured thi ...

jqueryhtmlajaxjquery-mobilehtml-table

When trying to upload a file with ng-upload in Angular, the error 'TypeError: Cannot read properties of undefined (reading 'memes')' is encountered

Struggling with an issue for quite some time now. Attempting to upload an image using ng-upload in angular, successfully saving the file in the database, but encountering a 'Cannot read properties of undefined' error once the upload queue is comp ...

html.netangulartypescript

Enhance the appearance of the circular heading

Is there anyway to customize the look of this rounded header? I am having trouble setting a white background. Update #1: This is my current header HTML code: Here is how it currently appears: I utilized Bootstrap along with some custom CSS. Update #2: ...

csshtmlcss-shapes

I'm puzzled as to why a scroll bar materializes

I recently encountered an interesting issue while working on my responsive web design project. Upon resizing the browser to a width of 615px or less, a horizontal scroll bar unexpectedly appeared. It's puzzling as to which element is causing this prob ...

cssscrollbarresponsive-designhorizontal-scrolling

Modifying the Background Color of a Header in React Native

As a newcomer to React Native, I am attempting to change the background color of the header bar (Navigation Bar). Here are some approaches that I have tried: return ( <View style={styles.container}> <NavigationBar titl ...

cssreactjsreact-native

Chrome is the only browser displaying background images

My current issue is that the background image only appears on Chrome and not on Firefox or Edge. I am trying to have a different background image each time the page loads. $(document).ready(function() { var totalBGs = 5; var rnd = Math.floor(Math.ran ...

jquerycssgoogle-chromefirefoxmicrosoft-edge

Modal window closed - back to the top of the page

I am struggling with a simple modal popup window that does not maintain the scroll position when closed, instead returning you to the top of the page. I am looking for a way to keep it at the same scroll position without much knowledge of Javascript. You ...

javascriptjqueryhtmlcss

Is there a way to remove this annoying line? Or perhaps just reformat it somehow?

I seem to be overlooking a small detail. I have created an html table with Bootstrap5 css, but I am struggling with the formatting. How can I remove the black line or adjust the boldness of the text in the table header? Check out the Table Header Row Bel ...

htmlhtml-tablebootstrap-5

dynamic color-changing feature on the menu

I have a navigation bar on my website with a set of sub-menus that appear when hovered over. I want to make the navigation bar change color dynamically each time it is hovered over. Additionally, I would like to add a range of colors to choose from. For ...

htmlcssmenucolorshover

Unusual spacing issue observed between <div> elements on Internet Explorer, but not on Firefox or Opera

I am facing a common question that many others may have asked before, but I haven't been able to find a solution to my specific issue. When viewing my website on FF, Opera, and IE on Windows 7, everything displays correctly. However, when using IE7 o ...

htmlcssinternet-explorer

The script is not functioning properly when placed outside of the HTML body tag

I have a main template that is functioning properly with the layout I've included here. However, I am facing an issue when trying to organize the scripts within one block. Specifically, when I move one of the scripts from the body section to the head ...

javascripthtmldjangodjango-templates

Model-View-Controller (MVC) and

Apologies for my initial question, as I am new to this. I am having an issue with using a radiobutton for the first time. I want to create a radiobutton that looks like the image provided in the link below: My image When the radio button is checked an ...

htmlasp.net-mvcradio-buttondetailsview

Spacing vertically within a table cell

I'm currently experimenting with creating a vertical text-align: justify effect between divs. I am working with a structure that includes 4 div elements inside a td, like this: <td> <div></div> <div></div> <div ...

csshtml-tableflexboxjustify

Display a full-screen image and align it horizontally from the center using CSS styling

When I fill a screen with an image using the following code: width:auto; height:100%; The image fills the screen vertically and almost entirely horizontally, but it gets cropped off on the right side. Is there a way to make the image float centered on th ...

css

Utilize a class within a Framer Motion element to incorporate animations or set initial properties

Is there a way to apply a class using Framer Motion tag in the animate and initial props? Here's an example: <motion.div initial={{ className: 'hidden' }} animate={{ className: 'visible' }} > <div>yo</div> & ...

cssreactjsnext.jsframer-motion