Place picture in the bottom right corner of the div without using absolute positioning

I am looking for a way to position an image in the lower right corner of a div, but I want to avoid using absolute positioning. The reason for this is that when I use absolute positioning, the text wrap is affected due to the float right applied to the image. I would like the text wrap to work properly alongside the image. Placing the image inside the div after a closing paragraph tag somewhat works, but it doesn't line up perfectly at the bottom with the end of the text. Do you have any suggestions or alternative methods?

.bottom-right-img{position:relative;width:203px;height:277px;float:right;margin-left:15px;}
.right-col{position:relative;width:410px;margin-top:15px;text-indent:15px;margin-right:61px;}

https://jsfiddle.net/qoy8tz7x/1/

Answer №1

After reviewing your jsfiddle, I have made some adjustments to the code. I have repositioned the elements to the bottom-right corner.

.bottom-right-img{position:absolute;bottom:0;right:0;width:203px;height:220px;float:right;margin-left:15px;}
.right-col{position:relative;width:410px;margin-top:15px;text-indent:15px;margin-right:61px;}

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

Is it recommended to continue using vendor prefixes for border-radius property?

When coding, I currently utilize the following: -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; After running tests, it seems that there was no noticeable difference in modern browsers (Chrome 33+, Opera 25+, Safari 8+). Internet ...

What is the best way to retrieve a value from a form and incorporate it into a controller?

Here is the code I've been working on: http://pastebin.com/AyFjjLbW I started learning AngularJS and was making progress, but now I'm facing a challenge. I'm trying to use a drop-down menu to select both a priority level and a type of job t ...

Utilizing HTML and JavaScript to add grayscale effect to images within a table, with the ability to revert to the colored version upon mouseover

Seeking advice on utilizing the mouseover / mouseout event in javascript to implement grayscale on a table. The challenge requires creating a gray image grid (table) using HTML and then incorporating Javascript so that hovering over an image triggers it to ...

Troubleshooting a glitch with passing a variable to a PHP script using AJAX

Explanation of the page functionality: When the quiz php page loads, a user can create a score using a function in quiz.js. This score is then stored in a variable score within quiz.js Once the score is generated, the user must click a button to move on ...

using javascript to change a link's state with a click action

I have a question that is related to the topic discussed here: Making a link stay active displaying hover effect upon click using javascript. I am looking for a way to disable the active class when the same link is clicked again. Any assistance on this mat ...

The JavaScript-generated form element will not be included in the data submitted through the POST method

While it may appear that this question has been asked before, my specific inquiry seems to be unique as I have not found a similar answer in other threads. Therefore, I am initiating a new discussion. My issue revolves around a form which contains a link ...

Navigation Bar Search Box Alignment Problem

Hi there, I'm new to programming and I'm trying to center my search bar with the navigation links beside it within a fixed navigation bar. However, I'm having trouble getting it to work properly. Can someone take a look at my HTML and CSS co ...

Ensure that a v-card in Vuetify/Vue 2 is consistently square in shape, yet capable of adjusting its size dynamically

I am facing an issue where I am trying to make sure a v-card always maintains a square shape (or any other aspect ratio set), even if it means there is scrolling or cut-off text/components inside the card. For example, I want this v-card with lorem ipsum ...

Ways in t4 templates to generate HTML output

I have a complex t4 text template that generates HTML code. This is what the t4 template looks like: <#@ template language="C#" debug="true" #> <#@ assembly name="System.Core" #> <#@ import namespace="System" #> <#@ import namespace= ...

Leveraging functions with Ng-Repeat

I am currently dealing with two different arrays of objects. The first array contains a list of permissions groups, while the second array consists of user groups. My main goal is to compare the Group Owner (which is represented by ID 70) with the list of ...

Issue with event listener arising once elements have been loaded into the dom

I have a project where I want to click on a category card to obtain its id and then redirect to the movies screen. I understand that using row.eventlistener() in index.js executes before the elements are rendered, causing the id not to be captured. How ca ...

The toggle checkbox feature in AngularJS seems to be malfunctioning as it is constantly stuck in the "off"

I am trying to display the on and off status based on a scope variable. However, it always shows as off, even when it should be on or checked. In the console window, it shows as checked, but on the toggle button it displays as off Here is the HTML code: ...

Creating a stylish flyout search box using CSS

I am looking to create a search box that pops up when a button is clicked and disappears when clicked outside. My approach involves using CSS to achieve this functionality. Here is the HTML structure I am working with: <div tabindex="0" class="search" ...

Adjust the size of the embedded iframe to match the dimensions of the containing div

Is there a method to resize the iframe embed code for a vine so that it fits within the boundaries of the enclosing div? The supplied embed code already includes sizing information as shown below: <iframe src="https://vine.co/v/iMJzrThFhDL/embed/simp ...

The navigation bar's background color remains static and doesn't update as

Struggling with HTML/CSS and unable to get the NAV bar to display the specified background color. Tried putting the nav in a class, commented out parts of the code, but still couldn't make it work. Despite looking for solutions, I can't figure ou ...

What is the process for editing or importing CSS within a React project?

I'm a beginner in React and I am encountering an issue with CSS not loading properly. I followed the tutorial for importing it, but it seems like there might be a better way to do it now as the tutorial is outdated. Below is my code, I would appreciat ...

Swapping out DIVs with jQuery

Currently, I am working on a project for a client where I need to create a sortable biography section using jQuery. Initially, I had a setup with just two bios (first person and third person) which was functioning perfectly: $("a#first").click(function() ...

Why does this inner HTML table always adjust its width based on the content within it? Is there a way to make it match the width of its container instead

I'm not very familiar with HTML and CSS, and I've come across a problem. Here is the CSS structure in question: <!-- TECHNICAL REFERENCE: --> <div id="referenteTecnicoTab"> <table width="800px" class="standard-table-cls table-he ...

JavaScript - Uncaught TypeError: type[totypeIndex] is not defined

After following a tutorial and successfully completing the project, I encountered a JavaScript error saying "Uncaught TypeError: totype[totypeIndex] is undefined". When I tried to log the type of totype[totypeIndex], it initially showed as String, but late ...

The animation is not updating quickly enough

I'm working on a navigation bar that sticks to the top of the page. As the user scrolls down, I want the bar to shrink, and when they scroll back up, it should return to its original size. Issue: The problem I'm facing is that when the user quic ...