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

Enhance the appearance of your Dojo TabContainer when viewing in Internet Explorer

Firefox seems to handle the following code without any issues: < div style="position:absolute;top:0px;margin-top:60px;bottom:0px;width:100%"> < div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width:100%;height:100%"> {% for row ...

cssinternet-explorerdojotabcontainerdijit.layout

Resize the images and align them side by side

I have a container with a maximum width of 1400px. Inside this container, there are two images of different sizes. I want to align them in a row using flexbox so that they fit within the 1400px width and still maintain a visually appealing appearance as sh ...

htmlcssflexbox

My div is currently being concealed by a jQuery script that is hiding all of its

Below is the current code snippet: jQuery(document).ready(function($) { $("ul.accordion-section-content li[id*='layers-builder'] button.add-new-widget").click(function() { $("#available-widgets-list div:not([id*='layers-widget']) ...

javascriptjqueryhtmlcss

``I am experiencing difficulties with utilizing a personalized color scheme in React JS with Material

I'm currently working on customizing the color palette for my project, but I am only able to modify the main attribute and not others. My development environment is JavaScript with MUI, not Typescript. import './App.css'; import {BrowserRout ...

javascriptcssreactjsmaterial-ui

The challenges of $location.search().name and base href in application URLs

I am working on an Angular app and my URL appears as http://localhost:8080/personal?name=xyz. To extract the 'xyz' value in JavaScript, I am using $location.search().name. Here is a snippet of my code: app.js app.config(function ($locationProv ...

javascriptangularjshtml

What is the proper way to utilize a variable within the translate3d function?

Currently, I am developing my portfolio and working on a function in JavaScript called translate3d(0,10px,0). My question is, how can I use a variable instead of hardcoding the value 10px? I attempted to use translate3d(0,a,0) where 'a' is a vari ...

javascripthtmlcss

Maintaining leading zeros in Firefox and SafariMaintaining leading zeroes in Firefox and

Having trouble with the number field in Firefox and Safari browsers (and possibly Opera, although I haven't tested it there). When entering an initial value in the number field that contains leading zeros, Firefox and Safari automatically remove them. ...

phpjqueryhtmlfirefoxsafari

Utilizing CSS to print specific columns on a separate page at regular intervals

I am facing a challenge with printing a very large HTML table, which is dynamic in the sense that the number of rows and columns can vary. When printing, the rows that exceed the page length are automatically continued on the next page. However, I also nee ...

htmlcssprinting

positioning a window.confirm dialog box in the center of the screen

I'm currently facing an issue with a dialog box that I have implemented successfully. However, I can't seem to get it centered on the page: <Button variant="danger" onClick={() => { if (window.confirm('Delete character?')) handle ...

javascriptcssreactjs

Error occurred while fetching image from Medium story API in Next.js

While working on my Next.js app, I encountered an issue with the Medium story API. Every time I try to fetch and display an image using the API, I receive an error message stating "upstream image response failed." The specific error code is: upstream image ...

javascripthtmlnext.jsjavascript-objects

Pattern matching for CSS class names

My current project involves creating a PHP function that will sift through CSS and JS files, swapping out class names and IDs in CSS selectors without touching the HTML elements or CSS properties themselves. Alas, my knowledge of regular expressions is sev ...

phpcssregex

What could be the reason for my ng-init not functioning properly?

<body ng-init="user=${userID};month=${month};curPageNum=${currentPage}"> Using JSP, I set initial values in the body tag. However, in the controller, I have the following code: console.debug($scope.user + " "+$scope.month} The issue is that only ...

htmlangularjs

Why is a <script> tag placed within a <noscript> tag?

Lately, I've been exploring various websites with unique designs and content by inspecting their source code. One site that caught my attention was Squarespace, which had blocks of <script> tags within a <noscript> tag: <!-- Page is at ...

javascripthtmlnoscript

You cannot embed a YouTube video using its iframe code in an HTML document, according to YouTube's guidelines

I attempted to include a YouTube video in my HTML code, but it kept showing the message "YouTube won't allow connection." Here is the code I used: <center><iframe src="https://www.youtube.com/embed/fcPOsBCwyu8" frameborder="0&q ...

htmlyoutubeembedx-frame-options

The mat-table fails to populate with data retrieved from the rest service

I have successfully fetched an array from my REST service and displayed some information from the response on the page. However, I am facing issues populating my mat-table and I'm unsure of the cause. The mat-table was functioning properly in the past ...

htmlangulartypescriptrestangular-material

Attempting to extract a parameter from a URL and pass it as an argument to a function for the purpose of locating objects based on

I am trying to retrieve data from a URL http://localhost:3000/share/user=sampleuser to display objects with an author value that matches the one in the URL. However, I encountered an error when attempting to call a function that extracts the value from t ...

javascripthtmlnode.jsmustache

Clicking on an absolute HTML element will instantly scroll back to the top of the page

Working on a website, I've designed a custom menu that is hidden with 0 opacity and z-index -1. When a button is clicked, the menu will appear on the screen. You can visit to see the site in action. The issue I'm facing is that every time I cl ...

javascriptjqueryhtmlcss

Leveraging the power of JavaScript Math methods to dictate the Co-ordinates of HTML Canvas .fillRect

Greetings to everyone! I have dedicated my entire evening to understanding how to implement the (Math.floor(Math.random()) function as the coordinates for the .fillRect method on an HTML canvas element. Despite searching through this website and various ...

javascriptjqueryhtmlcanvas

Angular 2: Change Boolean value depending on a condition

I find myself facing a challenge with a search-bar feature. My goal is to display all the filtered names when the input value reaches a length of 2 or more characters. After successfully extracting the value.length from the input field, I encountered a ro ...

javascripthtmlangularjsangularboolean

How can I use PHP to send the user to another PHP file?

After searching for answers with no luck, I ended up coming here to ask my question. Here is the code snippet in question : <a href="manage/10000' . $user["user_id"] . ' " class="user_grop">More Info</span></a> I am wondering ...

phphtmlhttp-redirect