Title padding extends beyond the boundaries of the div container

I have encountered an issue with the padding of the title being outside the div. To see the problem, check out my jsfiddle:

http://jsfiddle.net/h8Guf/

<!-- HTML -->
<div>
    <h2><a href="#">This is a test text</a></h2>
</div>

/* CSS */
div {
    position: relative;
    float: left;
    width: 500px;
    height: 300px;
    background: red;
}

div h2 {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;   
}

div h2 a {
    padding: 10px 20px;
    background: green;
}

I'm looking for suggestions on how to fix this issue. Any ideas?

css

Answer №1

Include the CSS rule display:block by using the code snippet below:

div h2 a {
  padding: 10px 20px;
  background: green;
  display: block; /* Ensure block display */
}

View Demo on Fiddle

Answer №2

since the <h2> element is set to absolute positioning, the padding is extending beyond the boundaries of the containing <div>. There are various solutions to this issue, one of which involves adjusting the bottom property like this

div h2 {
position: absolute;
bottom: 10px;
left: 0;
margin: 0;   
}

by making this adjustment, the padding will be properly accounted for

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 distinguish elements in the same HTML using Angular Material?

Currently, I am working on a project using Angular material, where I have a component.html file that defines a form and a table with data. In the first image of my project, you can see the tab title, a form to add new records, and the table displaying exi ...

cssangularangular-materialgridangular11

Implementing a login system on my website using HTML - a step-by-step guide

https://i.sstatic.net/9hOx6.png ...

javascriptphphtmlcssauthentication

Tips for adjusting the size of a background image using zoom

Currently, I am in the process of creating my first website. At this stage, it consists of a background image, an image, and a non-functional password input section. Everything seems to be going well so far. The background image fits perfectly on the scree ...

htmlcsszoomingbackground-image

Incorporate personalized design elements within the popup component of Material-UI's DataGrid Toolbar

I am in the process of customizing a Data Grid Toolbar component by making adjustments to the existing Grid Toolbar components sourced from Material-UI. For reference, you can view the official example of the Grid Toolbar components here. Upon clicking o ...

javascriptcssreactjsdatagridmaterial-ui

Combining input elements and captchas in one line within Bootstrap

I am currently working on a form group that includes a label, a captcha image, and an input field for the captcha code. My goal is to have the label positioned at the top of the form group, with the captcha image and input field aligned in one line. I have ...

htmlcsstwitter-bootstrap-3

Click on the entire table to be redirected to the specified link

Currently, I am facing an issue with styling my tables as links. I have 3 tables and I want each table to be a clickable link. However, after implementing the links, I am unable round the corners of the tables. I envision the final look to be similar to t ...

htmlcss

The placement of text appears to be incorrect when applying the float:left property in CSS

My issue is that I want #text1 to display on the right side of #video1, and #text2 to be positioned next to #video2. However, currently #text2 is also appearing beside #video1. Can someone please explain why this is happening and provide a solution to fi ...

css

Importing styles from an external URL using Angular-cli

How can I load CSS styles from an external URL? For instance, my domain is domain.eu but my site is located at sub.domain.eu. I want to use styles that are stored on the main domain (common for all sites). The example below does not work: "styles&qu ...

htmlcssangularangular-cli

Tips for centering a div horizontally when it exceeds the width of a mobile screen

My challenge is to create a circular div element that is wider than the mobile screen and perfectly centered. This circular div needs to be an exact circle, specifically targeted for mobile screens. I've attempted to achieve this using the code in th ...

javascripthtmlcss

Deciding Between Two Columns or One Column for Your JQuery Accordion

I am currently working on customizing an Accordion that is too large in height for my liking. My goal is to convert the single column layout into a two-column display, side by side. Having multiple items in one column results in excessive height, hence t ...

jquerycss

Ensure that the width of the sibling div matches the width of its sibling image

I need help displaying an image with two buttons positioned below it. The dimensions of the image can vary, so I've set a max-width of 60% and max-height of 80%. However, I'm struggling to align the buttons correctly under the image - with the le ...

htmlcssalignment

Issue with Angular Script not functioning upon reopening the page

I recently completed my first website, which can be found at Despite my efforts, I've encountered an issue that has me stumped. When you navigate to the certificate page, you should be able to input your name onto the certificate. However, if you sw ...

javascriptjqueryhtmlcssangularjs

Tips for adding CSS attributes to a <style> tag in Internet Explorer

My current issue involves an ajax web application that loads all parts on a single page, specifically index.html. The inner parts being loaded in index.html have exceeded 32 pages (html, js, css). Now I am facing difficulties with the CSS files that need ...

javascriptjqueryhtmlcssinternet-explorer

I'm looking for the location of Angular Materials' CSS directives. Where can I find them?

Currently, I am using components from https://material.angularjs.org/latest/ for a searcher project. One specific component I am working with is the md-datepicker, and I would like to implement some custom styles on it such as changing the background colo ...

javascriptjquerycssangularjs

"Modifying the content:url() with JavaScript: A step-by-step guide

Hello, I am currently working on creating a traffic light using an array of images. My goal is to change the image path specified in the CSS when a button is clicked, to change the appearance of the traffic light. In this case, the 'content.url()&apos ...

javascripthtmlcss

What are the reasons for not utilizing JSS to load Roboto font in material-ui library?

Why does Material-UI rely on the "typeface-roboto" CSS module to load the Roboto font, even though they typically use JSS for styling components? Does this mix of JSS and CSS contradict their usual approach? ...

cssreactjsmaterial-uijss

Scaling Vuetify icons dimensions

During the development of an app using Vuetify, I encountered challenges in changing the default colors set by Vuetify. After some trial and error, I came across a solution on: https://github.com/vuetifyjs/vuetify/issues/299 The solution involved adding ...

cssvue.jsvuejs2stylusvuetify.js

navigation panel including menu items and company logo positioned to the left side

My webpage contains the following code: <nav class="navbar" style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:100%; "> <div class="container-fluid"> < ...

htmlcssbootstrap-4flexbox

Customizing the default image of a Select dropdown field in Sencha Touch

Does anyone know how to change the default image of a select dropdown in Sencha Touch to a customized image? I've attached a screenshot for reference but can't seem to find any properties or classes to adjust this. Any guidance would be greatly a ...

javascriptcsshtmlsencha-touchsencha-touch-2

Troubleshooting: Issue with Button Layout in Ionic's ItemSliding Component

How can I create a list item that allows swiping to reveal an archive button? The requirement is for the icon to appear to the left of the text. I'm referring to the documentation on Button Layout: https://ionicframework.com/docs/api/components/item ...

cssangulartypescriptionic2ionic3