Implementing CSS for preventing text from overlapping with images

I have designed an image that includes some accompanying text, as depicted in the figure below.

<span class="productname ">Beautiful Creations</span>
<img src="xy.jpg" data-attr="productimg" class="productimg " />

Below is my CSS code:

.productimg
{
float:right;
margin-top:15px;
height:120px;
margin-right:2%;
border:2px double  #0ff;
width:150px;

}
.productname
{
font-size:1.2em;
display:block;
float:left;
}

I'm looking for help on avoiding text overlap and ensuring long text wraps to the next line when using CSS styles. Can someone please assist me with this?

After removing the 'position' rule and 'right=0'

htmlcss

Answer №1

When you use absolute positioning for the product image, it is taken out of the normal flow of the document, leading to overlaps.

To ensure proper text wrapping around the image, consider removing position: absolute and right: 0px; from the .productimg class. You can also adjust the placement of the text by moving it before the .productname or by floating the .productname element with a specified width.

View example on CodePen

HTML

<div class="product">
  <img src="xy.jpg" data-attr="productimg" class="productimg " />
  <span class="productname ">Excusite Beauty</span>
</div>

CSS

.productimg {
  float: right;
  /* margin-top:15px; */
  height: 120px;
  border: 2px double #0ff;
  width: 150px;
}
.productname {
  font-size: 1.2em;
  display: block;
  width: 150px;
}
.product {
  width: 300px;
}

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

Unable to conceal element if it is devoid of content

<div id="web-link" class="infoline"> <i class="fa fa-link fa-2x fa-fw coloriconfa"></i> <a href="<?=$data['post']['url']?>" target="_blank"><?=$data[ ...

javascripthtml

Algorithm for detecting collisions in Javascript

I am looking to implement a collision detection function in JavaScript for canvas. Specifically, I have coin and piggy bank objects and want to create a function that triggers the disappearance of a coin object when it comes into contact with a piggy bank. ...

javascripthtmlcanvas

Calculating the time difference between the current datetime and a value retrieved from

I am having trouble calculating the difference between the current date and a date stored in my database. My goal is to display an expiry date message if the difference is 30 days. Here is the code snippet I currently have: var timeDifference = DateTime.N ...

c#.netasp.nethtml

Obtain user input from a form and assign it to a variable in a jQuery AJAX

How can I pass the value of an HTML Input Form to a jQuery AJAX call's URL as `amt` in `url: "http://localhost:8080/orderNo?amount=" + amt,`? The input value logs to the console when calling getAmtValue(), but I'm struggling to access the `amt` ...

javascriptjqueryhtmlajax

What is the best way to choose a radio button when the page loads and extract its value at

After successfully setting a radio button to be selected upon page load, I am now facing the challenge of displaying the value of that button without the need to click on it. My goal is to toggle the visibility of different div elements, with the initial ...

htmlradio-buttononload

Implement a click event listener to the existing button function

How can I ensure that the function below only fires when the element with id #submit is clicked? I added a back button, but after clicking it, the code below executes unexpectedly. I need to add a condition to ensure that the code below only runs when #sub ...

javascriptjqueryhtml

The issue of the URL base vanishing when included in an email through PHP

Every time I use PHP to send an email (with content generated by jQuery, AJAX POST to PHP), the base of the URL goes missing upon reaching the destination. For example, when I send an email with the following content: Click <a href="http://www.example ...

phpjqueryhtmlajaxemail

The occurrence of Multiple Button events leads to an error message stating: "Uncaught TypeError: Cannot read property 'remove' of undefined"

I am struggling to add an EventListener to each Delete Button (1,2,3) as I keep encountering an error that says "add" is undefined. Do you have any suggestions on how to fix this issue? My goal is to display a confirmation window when the DELETE button is ...

javascripthtmlcss

The repetition of the react nodejs page load occurs when the get method is utilized

I've successfully set up a page and function for loading the customer list. However, I'm facing an issue where adding the get method to my code results in it being called every time information is received from the URL and the page is rendered. i ...

javascripthtmlnode.jsreactjshttp-post

Troubleshooting the issues with implementing cross-browser jscrollpane functionality

Hey there! I've been exploring this tool to customize the default scroll-bar, and here's a fiddle showcasing my experimentation. In the fiddle, I've included the following code snippet <div class="scroll-pane horizontal-only">(located ...

javascriptjqueryhtmlcss

The Bootstrap 4 dropdown seems to have a one-time use limit

I'm currently working on a dropdown menu using Bootstrap 4. The dropdown menu is functional, but I'm facing an issue where it only toggles once. I have tried various solutions recommended on different websites, but none of them seem to work. Belo ...

htmljquerycssbootstrap-4responsive-design

What causes <input> elements to vertically center when using the same technique for centering <span> elements? (The line-height of <input> does not match its parent's height)

Important: The height of <div> is set to 50px, and the line-height of <span> is also 50px When 'line-height' is not applied to the <span>, all elements align at the top of the parent. However, when 'line-height: 50px&apo ...

htmlcss

What is the best way to retrieve the previously chosen value from one dropdown and populate it into another dropdown when

I have 3 choices available. When the user selects the third option, a jQuery onchange event is triggered to send the variable to another PHP file for database validation based on the selected id. The challenge lies in how I can also include the variables f ...

javascriptphpjqueryhtmlmysql

Arrange Image and text to adapt to different screen sizes

As a beginner in CSS, I am overwhelmed by the numerous ways to position elements on a webpage. I am currently trying to achieve two different layouts: Scenario 1 : Plenty of space available [Image] this is the text that I want Scenario 2 : Limited spac ...

css

Innovative Features in Google Chrome

There is a nifty effect on Google Chrome that makes tabs light up when new content appears on the page and you are not currently viewing that tab. It can often be seen on sites like grooveshark. If anyone knows how to recreate this effect, I would greatl ...

javascripthtmlgoogle-chrome

I am looking for a pair of HTML tags that will allow one to be visible while the other is hidden, and then switch when needed

I am in the process of constructing a webpage dedicated to learning Japanese vocabulary. Each word will be presented within a sentence, just like the example shown below. 森林に散歩する take a walk in the forest In order to facilitate the practic ...

htmlcsstoggle

Internet Explorer 8 does not properly display table padding

Here is an image showing a table displayed in Chrome 5. The same table appears differently when viewed in IE8: To see the webpage for yourself, click on this link: To fix the padding issue that IE8 does not handle correctly, use this CSS rule: td#conten ...

htmlcssinternet-explorercross-browser

I can't seem to figure out why this isn't functioning properly

Upon examining the script, you'll notice the interval() function at the very bottom. The issue arises from bc-(AEfficiency*100)/5; monz+((AEfficiency*100)/5)((AFluencyAProduct)/100); For some reason, "bc" and "monz" remain unchanged. Why is that so? T ...

javascripthtmlcssintervals

Manipulating Object origin data

I'm unsure if this can be achieved. I am aiming to create a header and footer that remain the same while only switching the content pages. The resources I have at my disposal cover HTML, JS, CSS, and JQuery. Below is a simplified version of my curre ...

javascripthtml

The Bootstrap column is causing a cropping issue on the left side of my rows

I'm currently working on a Python/Flask/HTML project that utilizes Bootstrap 4 for a grid system with multiple rows and columns. However, when I attempt to run the project, a few pixels get cut off on the left side of the screen. I've thoroughly ...

htmlcssbootstrap-4