The full width of the div exceeds the parent's width, resulting in the box size being ineffective

I'm experiencing an issue where my cover is wider than my element and content. It seems to be covering the gunter, but I've tried using background-clip: content-box; and box-sizing: border-box;, which haven't resolved the problem. I also want to maintain the rounded corners. How can I fix this?

.myElem {
  position: relative;
  width: 200px !important;
  height: 200px;
  margin-bottom: 1rem;
}
.content {
  width: 100%;
  height: 100%;
  background-color: yellow;
}
.cover {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: red;
  height: max-content;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.cover:hover {
  height: 95%;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46242929323532342736067368766874">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row myDiv">
  <div class="myElem">
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
    <div class="cover">
      <p>Lorem ipsum...</p>
    </div>
  </div>
  <div class="myElem">
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
    <div class="cover">
      <p>Lorem ipsum...</p>
    </div>
  </div>
</div>

htmlcssbootstrap-5

Answer №1

Due to the utilization of the row class in your .myElem element, some padding is being applied. Since you are already using the bootstrap row class, why not also incorporate the col class? I have removed the width from .myElem and wrapped it in col-3, which is a bootstrap class. This adjustment ensures that both your content and cover elements have the same width.

  <div class="col-3">
  <div class="myElem">
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
    <div class="cover">
      <p>Lorem ipsum...</p>
    </div>
  </div>
   </div>


.myElem {
  position: relative;
  height: 200px;
  margin-bottom: 1rem;
}
.content {
  width: 100%;
  height: 100%;
  background-color: yellow;
  border-radius: 0 0 10px 10px;
}
.cover {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: red;
  height: max-content;
  border-radius: 0 0 10px 10px;
}

.cover:hover {
  height: 95%;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5878a8a919691978495a5d0cbd5cbd7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row myDiv">

  <div class="col-3">
  <div class="myElem">
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
    <div class="cover">
      <p>Lorem ipsum...</p>
    </div>
  </div>
   </div>
  <div class="col-3">
  <div class="myElem">
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
    <div class="cover">
      <p>Lorem ipsum...</p>
    </div>
  </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

Looking to showcase this information using an HTML Ajax jquery call

{"response":{"refno":"hfc","status":"Status : Reference number does not exist."}} After sending a request to a specific webpage, I received a response in JSON format. I am looking for a way to display this response in HTML, either in a table format or a s ...

jqueryhtmlajax

Is there a way to ensure that the table headers are printed on every page when using Google Chrome

When printing documents in Chrome browser, the table header (thead) does not appear on every page. I want to ensure that the table header is displayed on each printed page, just like it is done with IE and Firefox. However, Chrome does not support this fea ...

javascriptjqueryhtmlcssgoogle-chrome

Images are suddenly encircled by a mysterious border

On my wordpress website, I encountered a strange issue with some photos. Specifically, an image of a cross in a circle is getting a weird border around it, but only on certain resolutions (such as width:1506). Despite inspecting the element, I couldn' ...

htmlcsswordpress

Experience the magic of a customized cursor that disappears with a simple mouse movement in your website,

I have been experimenting with designing a custom cursor for my website. After finding a design I liked, I made some adjustments to suit my needs. However, an issue I encountered is that when I scroll, the custom cursor also moves away from its original po ...

javascripthtmlcsscursor

Unable to execute specific php function using ajax

I have created a script that utilizes an ajax request. This script is triggered when a user clicks a button on the index.php page, like so: Risorse.php <form method='post'> Name <input type='text' name='nome&apo ...

javascriptphphtmlajax

Firefox is not rendering HTML5 elements properly

While my website performs well in Chrome and Safari, there seems to be an issue with how elements are displayed in Firefox or IE. Some elements are being pushed to the right, and I am unsure of how to fix this problem. You can view the site here To aid i ...

jquerycsshtml

Struggling to align h2 in div using bootstrap

Hello everyone! Can anyone help me figure out what I'm doing incorrectly? <div class="col-4" style=""> <h2 class="text-center vertical-center">Insert text here</h2> </div> I've attempted ...

cssbootstrap-4bootstrap-5

The div element nested within the button is not visible

Fiddle I am trying to create a unique social button design that resembles the custom Google+ sign-in button: However, I encountered an issue where the second div element (to hold the right part of the button) is not displaying as expected: Here is the c ...

javascriptjqueryhtmlcss

Customizable dropdown menu design using HTML and CSS

Hello everyone, this is my very first post on Stack Overflow and I'm a bit unsure about the rules regarding posting. Please feel free to point out any mistakes I may have made. I've searched through the forums but haven't found a clear answe ...

htmlcssdropdown

Can you guide me on how to duplicate a file when a button is clicked?

I am working on creating a one-page utility/prototype that has an admin user interface. The goal is to have a drop-down box for the admin user to select an option and then copy a file from one directory to another upon clicking a submit button. Although I ...

phpjqueryhtml

Issue with background image repeating incorrectly when resizing

I've recently added an image as the background for my website using the following style: #whole_wrapper{ background-image: url(../images/wrapper_bg.jpg); background-repeat: repeat-x; width: 100%; float: left; height: 116px; } ...

htmlcss

I have been attempting to implement validation in JQuery, but it doesn't seem to be functioning correctly

Can someone assist me with adding validation in jQuery? I'm stuck and need help solving this problem. $(function(){ $("#btn").click(function(){ var b=prompt("Enter your link"); $("a").attr("href",b); if($("b").v ...

javascriptjqueryhtmlcss

The custom stylesheet added to index.html is not taking precedence over the Bootstrap 5 styles applied through NPM

In my Vue 2 project, I encountered an issue with Bootstrap 5.3 when installed via NPM. My custom CSS stylesheet in the index.html file was not able to override Bootstrap's CSS. Interestingly, I faced no problems when using Bootstrap from a CDN. Addit ...

cssnpmvuejs2overridingbootstrap-5

Is it feasible to add to an ID using ngx-bootstrap's dropdown feature?

In the documentation for ngx dropdown, there is a feature called "append to body." I recently tried changing this to append to a table element instead and it worked successfully. Now, on another page, I have two tables displayed. If I were to assign each ...

cssangularngx-bootstrap

What causes variations in the output of getClientRects() for identical code snippets?

Here is the code snippet provided. If you click on "Run code snippet" button, you will see the output: 1 - p.getClientRects().length 2 - span.getClientRects().length However, if you expand the snippet first and then run it, you will notice a slight dif ...

javascripthtmlcss

Ways to display text when hovering over an image link

Despite trying various techniques recommended by fellow Stackoverflow users who faced similar issues, I still encountered a problem where the text appeared below the image even after applying the suggested methods to my code. I also experimented with a me ...

htmlcssbootstrap-4

Guide on Implementing Class on Dropdown in AngularFollow these steps to effectively utilize the

Currently, I am facing an issue with my Angular project. I am trying to implement a Directive that activates a dropdown menu. However, the 'open' class is deprecated in Bootstrap 3, and I am using Bootstrap 5. How can I transition to the 'sh ...

angularangular-directivebootstrap-5angular2-hostbinding

Displaying maximum number of items in each row using ngFor

Is there a way to automatically create a new row within the 'td' element after the ngFor directive has generated 10 image repeats? Currently, all the images are displayed in a single td and as more images are added, they start to shrink. <td ...

cssangularhtml-tablerepeat

Guide to collapsing the hamburger style menu in React-Bootstrap when a link is clicked within it

In my development projects, I utilize the react-bootstrap library and am currently working on a website where all the content is contained on a single page. As a result, all of my links point to different scroll positions on the same page. However, I have ...

htmlreactjsbootstrap-4react-bootstrap

Is there a way to position one DIV behind another?

Hey, I'm working on my first project and running into some trouble with divs. I'm trying to position the firework behind the central text but can't figure it out. Can anyone lend a hand? I need to add more details in order to submit the que ...

javascripthtmlcssflexbox