The text is obscured by the overlapping div within the parent div

Here is the code snippet I am working with:

.pa {
  width: 400px;
  background: #008000;
  position: relative;
}

.icon-wrap {
  height: 100%;
  float: right;
  width: 30px;
  background: yellow;
  padding: 5px;
  position: absolute;
  top: 0px;
  right: 0px;
}
<div class="container">
  <div class="pa">
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
    Text Text
    <div class="icon-wrap">
      <a><i class="fa fa-camera pull-right"></i></a>
    </div>
  </div>
</div>

Fiddle Example

The issue I am facing is that the yellow div is overlapping the text of the parent div. I want to find a solution to wrap the text in order to prevent this overlap. Can anyone help me with this?

Update Note:
I have tried adding padding-right:30px which works, but ideally I would like to find a solution by only changing the .icon-wrap class. Is there any way to achieve this?

htmlcssoverlapping

Answer №1

One solution is to adjust the padding-right based on your specific needs, which should fix the problem of overlapping elements.

.pa
{
  padding-right:30px;
}

Answer №2

There is an absolute division with a width:30px. To ensure proper spacing, you have applied padding-right:30px to the text-containing div. I trust this explanation clarifies things.

Answer №3

You have the option to use padding-right: 30px; and width: calc(400px - 30px);

If you have any questions, feel free to ask.

.pa {
    width: calc(400px - 30px);
    background: #008000;
    position: relative;
    float: left;
    word-wrap: break-word;
    padding-right: 30px;
}
<div class="container">
 <div class="pa">
 Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 


<div class="icon-wrap">
<a><i class="fa fa-camera pull-right"></i></a>
</div>
</div>
</div>

Answer №4

To eliminate the need for absolute positioning, you can utilize flex properties:

.pa {
  width: 400px;
  background: #008000;
  display: flex;
}

.icon-wrap {
  min-width: 30px;
  background: yellow;
  padding: 5px;
}
<div class="container">
  <div class="pa">
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
    Text Text
    <div class="icon-wrap">
      <a><i class="fa fa-camera pull-right"></i></a>
    </div>
  </div>
</div>

Link to updated fiddle

Answer №5

Is the goal just to modify the .icon-wrap class?
If so, adjust the .icon-wrap class styles to have a right: -40px; position.

Answer №6

To prevent overlapping in .pa's position of absolute, you can adjust the inner content by adding padding right 30px or adjusting its width:

Check out this fiddle for reference

.pa
{
  width:400px;
  background:#008000;
  position:relative;
}
.p{width: calc(100% - 30px);}
.icon-wrap
{
  height:100%;
  float:right;
  width:30px;
  background:yellow;
  padding:5px;
  position:absolute;
  top:0px;
  right:0;
}
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
 <div class="pa">
 <div class="p">
 Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div>


<div class="icon-wrap">
<a><i class="fa fa-camera pull-right"></i></a>
</div>
</div>
</div>

Answer №7

.pa {
  width: 400px;
  background: #008000;
  position: relative;
}

.icon-wrap {
  height: 100%;
  width: 30px;
  background: yellow;
  float:right;
  padding: 5px;
  position: absolute;
  top: 0px;
 left:100%;
}
<div class="container">
  <div class="pa">
    Unique Text Unique Text Unique Text Unique Text Unique Text Unique Text Unique Text Unique Text Unique Text Unique Text Unique Text Unique Text Unique Text Unique Text Unique Text Unique Text Unique Text Unique Text Unique Text Unique Text Unique Text Unique Text
    Unique Text
    <div class="icon-wrap">
      <a><i class="fa fa-camera pull-right"></i></a>
    </div>
  </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

What is the best way to enlarge a specific section of a map or image using HTML?

Can you resize a specific area of a map in HTML? ...

htmldictionaryscalearea

Is it possible to display images in PHP when the value matches the specified string?

Is there a faster and more efficient way to display one or multiple images if $value == $string? For instance, let's say I have a cell containing the string 'r o g'. If a user inputs ro, it should output <img src="red.gif"> and <im ...

phphtmlimageif-statement

Submit Button Not Responding on Mobile Device

I am facing an issue with my VueJs app. The contact form works perfectly on browsers, but when accessed from a smartphone or tablet, it fails to function properly. I have tried two different implementations to resolve the problem. Here is the first implem ...

htmlformsvue.jsvuejs2

Why is the outline buttons class only displaying gray colors for me?

I'm having trouble with the outline buttons class (btn btn-outline-primary) in Bootstrap. For some reason, all the buttons appear gray instead of colored as they should. Here's an example of how the buttons should look: https://ibb.co/ChKf83y, bu ...

htmlcssbootstrap-4

Accelerate website loading

After testing the speed of my site's loading, I discovered that the reason for its slow speed is... Some proxy caching servers do not cache resources with a "?" in the URL. To address this issue, it is recommended to remove the query string and enc ...

htmlcssweb-development-server

How can I ensure that the height of my Flexbox always stretches vertically to 100% and fills the available space?

https://i.sstatic.net/j3VOr.png https://codepen.io/leon-yum/pen/GxWqMe?editors=1100 Attempting to replicate an issue encountered in one of our applications. The Sidebar within our app never expands 100% to accommodate the content. The <div class="cont ...

htmlcssflexbox

Discoloration of images on HTML5 Canvas

When working with HTML5 Canvas and using the drawImage function, I've observed slight discoloration in certain browsers such as Google Chrome and Mozilla Firefox. Interestingly, Internet Explorer and Chrome Android do not exhibit this issue. The globa ...

htmlimagecanvas

The issue of JQuery UI Dialog remaining open even after triggering it through an Input focus event

I am facing an issue with JQuery and JQuery UI. I thought upgrading to the latest stable version would solve it, but unfortunately, that was not the case. I am currently using Chrome. When I initiate the dialog by clicking on a specific element, everythin ...

javascriptjqueryhtmljquery-ui

Utilizing Bootstrap 4 to seamlessly transition the navbar-brand image to overlap on larger screens, and shrink-to-fit on smaller screens

I have a challenge that I'm working on. My goal is to make the navbar-brand image overlap with the navbar without changing its height, as the navbar itself has a fixed height of 80px. The current solution kinda works, but I am facing an issue ...

csstwitter-bootstrapbootstrap-4

The alignment of Flex Divs is off despite having identical heights

I'm facing an issue where divs are not staying at the top of their parent div if the image they contain does not have the same height as the others. Within my navbar, I have icons of varying sizes placed inside divs using display: flex to vertically ...

htmlcssflexbox

The `overflow:auto` property is causing the flex container to overflow due to the size of its fixed width children

Here's a unique CSS puzzle for you all: Imagine the following hierarchy: app container flex container item1 - fixed width(80px) item2 - responsive width(width:100%). MUI Stepper - overflow:scroll, width:100% This structure would look like this: ...

cssreactjsmaterial-ui

Checking the opacity with an if/else statement, then adding a class without removing the existing class

This function is designed to check the opacity of the header, which fades out as a user scrolls down. If the opacity is less than 1, it disables clickability by adding the class "headerclickoff". However, there seems to be an issue with removing the clas ...

javascriptjquerycss

Tips for shifting an image upwards and extending it beyond one section while keeping the other section unaffected

Struggling all day while designing a CSS site, trying to hide one part of an image when it overflows and keep another part visible, in addition to moving the image up and down. Here's the HTML code snippet: <section class="next-gen"&g ...

htmlcssbootstrap-5

Ways to access the entire parent element, rather than just the individual child element, following the use of e.target

Looking to target the li element itself when clicked, rather than its child elements. The goal is to determine which specific option the user selects from a dropdown menu using event.target in jQuery. If the user chooses an li with a class of 1, set one gl ...

javascriptjqueryhtmlevents

Change the CSS menu item to directly load the website instead of using javascript to replace a placeholder

I have a CSS navigation menu, but I'm facing an issue. When I click on a link in the menu, like Google for example, it only changes the name of the placeholder and doesn't actually load the page. Any suggestions on how to fix this? Thank you for ...

javascriptjqueryhtmlcssmenu

What is the best way to transfer the value of a radio button, retrieved from a database, to a textbox?

Greetings, I am trying to figure out how to pass the value of a radio button to a textbox using jQuery and PHP. The radio buttons are generated dynamically based on rows from my database, so I set the row ID as the ID for each radio button. However, the co ...

javascriptphpjqueryhtml

Using jquery to update a link when a different link is clicked

Recently, I've started using JQuery and encountered a challenge. When I click on the first link, an Ajax request is sent to the server and data is received successfully. However, in the callback function, I'm struggling to change the display text ...

javascriptjqueryhtmljquery-selectors

The subpage on Github Pages is failing to load despite the correct URL being entered

While working on a multipage website using React and hosting it on Github pages, I encountered an issue. The website functions perfectly on localhost, but encounters errors when accessing a subpage on Github pages. Upon clicking the subpage link, Github p ...

htmlreactjsreact-routergithub-pages

Display all attribute connections for a product in Prestashop

I have updated the products in my shop to include different combinations. These combinations involve a 'packaging' attribute with two options: a 100 units box and a 200 units box, each with its own unique reference number. On the product page, t ...

phphtmlcssprestashop

Displaying complex JSON data in an HTML format using JavaScript

How can I convert the second array of entities into an HTML format from the JSON data using a for loop or similar method? To access the necessary data, I currently use console.log(data.response[0].entities.urls); $(document).ready(function () { $.getJSO ...

javascripthtmljsonnestedoutput