What is the best way to eliminate excess padding or margin within an absolute block?

I am working on a project where I want to replicate an illustration similar to this one

However, I am encountering an issue with the padding or margin. Here is what I have attempted so far: http://jsfiddle.net/kl94/RZPRS/2/

.circles {
    background-color: red;

    position:absolute;
    right: 0;
    top: 0;

    margin: 0;
    padding: 0;
}

.circle-title {
    background-color: orange;

    position:relative;
    right: 0px;
    top: 0px;

    width: 80px;
    height: 80px;
/*     -webkit-border-radius: 40px;
    -khtml-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px; */

    margin:0;
    padding:0;
}
.circle-reads {
    background-color: #28dd21;

    position:relative;
    right: 0px;
    top: 0px;

    width: 60px;
    height: 60px;
/*     -webkit-border-radius: 30px;
    -khtml-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px; */

    margin:0;
    padding:0;
}

The key requirement is for the red div to be absolutely positioned relative to the top/right parent div.

htmlcss

Answer №1

Given the situation, it would be wise to also set the other two elements to be absolute. Make sure to establish a fixed height and width for the red div since it is positioned absolute

Check out this jsfiddle.

.circles {
    background-color: red;
    position:absolute;
    height:100px;
    width:100px;
    right: 0;
    top: 0;
}

.circle-title {
    background-color: orange;
    position:absolute;
    left: 0px;
    top: 0px;
    width: 80px;
    height: 80px;
    -webkit-border-radius: 40px;
    -khtml-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px; 
}

.circle-reads {
    background-color: #28dd21;
    position:absolute;
    right: 0px;
    bottom: 0px;
    width: 60px;
    height: 60px;
    -webkit-border-radius: 30px;
    -khtml-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

If you prefer not to specify the dimensions of the two circles, you can experiment with this approach. Check out jsfiddle. However, it may require just as much attention as setting the height and width explicitly.

Answer №2

Make sure to assign a class to your p elements and adjust their margin and padding to be 0.

<p class="paragraph">TITLE</p>
<p class="paragraph">65 views</p>

CSS

.paragraph {
    margin: 0;
    padding: 0;
}

If needed, consider adding float: right; to your lower div.

.circle-views {
    float: right;
}

Check out the JSFiddle demo

UPDATE: I made some adjustments and now it looks very close to what you're aiming for.

Updated Fiddle link

These tips are a result of my personal experience and extensive research while working on HTML/CSS projects.

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

Utilizing JavaScript and PHP to dynamically load HTML content on a webpage

Below is the code snippet I'm working with: <?php if ($x == 1){ ?> <b>Some html...</b> <?php } else if ($x==2){ ?> <b> Other html...</b> <?php } ?> Now, I want to create two links (a ...

phpjavascriptjqueryhtml

Screen resolution for the background image on the banner

I'm currently working on a website that can be found at this temporary link: The main banner of the site features a background image with fading text, which looks great on standard desktop screens. However, when viewed on wider screens like 1600x1200 ...

htmlcssresolutionscreen-resolution

Is it possible to apply styles to javascript elements without relying on img class? Additionally, how can I incorporate an onclick button while maintaining a fully functional navigation bar?

My current project involves creating an interactive collage where users can click around and have pictures pop up at the clicked location. The functionality works as intended, but now I'm facing issues with the navigation bar not being clickable. Addi ...

javascripthtmlcss

Exploring how enums can be utilized to store categories in Angular applications

My application has enums for category names on both the back- and front-end: export enum CategoryEnum { All = 'All', Category1 = 'Category1', Category2 = 'Category2', Category3 = 'Category3', Cate ...

htmlangulartypescriptenums

Is it advisable to avoid using `&apos;` for escaping single quotes?

According to the insights shared in conversations about the popularity of single quotes in HTML and Jquery embedded quote in attribute, the Wikipedia page on HTML highlights that: The use of the single-quote character ('), as a way to quote an attri ...

htmlescapingquotes

In JavaFX, when adjusting the transparency of a popup window, only the brightness changes while the solid color remains unchanged, effectively concealing

Is it possible to have a transparent popup window (errorDialog.fxml) on top of the main window (mainWindow.fxml) with 50% opacity while still showing the content of the main window underneath? My attempts at setting the background color of the overlay insi ...

cssjavafxfxml

Having trouble retrieving data from the server for the POST request

I am fairly new to using Jquery and Ajax requests. I'm currently working on a website where I have a simple form that collects an email address from users and sends it to the server. However, I'm struggling to figure out how to capture the form d ...

javascriptjqueryhtmlajaxpost

Move the menu button to the right of the title slide, beyond the edge of the card

Having an issue with the MuiCardHeader component. <CardHeader disableTypography avatar={renderAvatar()} action={ <IconButton onClick={toggleMenu}> <img src={MoreIcon} alt=""/> </IconButton ...

javascriptcssreactjsmaterial-ui

The div structure generated through JavaScript appears distinct from its representation in the live DOM

Currently, I am facing a challenge with creating a complex nested Div structure within a JavaScript loop that iterates over JSON response objects from the Instagram API. The main goal is to set the URL for each image within a specific Bootstrap div layout. ...

javascriptjqueryhtml

Using D3-GraphViz in Javascript along with an Angular template: A step-by-step guide

I am attempting to integrate d3-graphviz following the guidance provided here within an angular template, like in this example. The tutorial on the d3-graphviz website advises me to include the following code in the index.html file: <!DOCTYPE html> & ...

javascripthtmlangulard3.jsgraphviz

Retrieve JSON data by making a POST request to a website's API

Can you help me retrieve Json data from a website API using JavaScript? I'm trying to fetch quotes from the following website: for my quotes generator page. While I have some understanding of making GET requests, it seems that this API requires POST ...

javascripthtmljson

Tips for preventing an element from scrolling horizontally along with the page body

This is the structure of my HTML: <div class='header-wrapper'> <div class='title'>Title</div> </div> <div class='some-wide-content'> </div> Let's imagine a scenario where the br ...

htmlcss

Integrating AJAX functionality into a PHP webpage with various options selected

I'm a beginner coder looking for some assistance. Currently, I have a page with four select inputs, each with two options. When all selections are made and the submit button is clicked, a specific song out of 16 based on the choices will play in an a ...

phphtmlajaxformsselect

What is the best way to display a book cover and position it in a specific location?

There is a dynamically populated HTML table using AJAX: (shown in the image below) https://i.sstatic.net/ig9Nv.png If I click on any cell in the table, except for headers c1 through c4, I want to display a cover hiding the cells to the left of the clicke ...

jqueryhtmlcss

Having trouble executing javascript with Ext.Ajax in Sencha-Touch2?

Currently, I am utilizing htmlPanel.js in Sencha-Touch as discussed in the Forum here to exhibit local HTML content. Even though I can load the HTML content with standard HTML tags, I'm facing issues with loading JavaScript. Here's the snippet o ...

javascripthtmlajaxextjssencha-touch-2

Create a mobile-friendly version of the website that retains all the functionality and features of the desktop

Currently, I am in the process of optimizing my website for mobile devices. However, creating a separate subdomain and folder for a new mobile version is proving to be a challenge since it was not originally requested. How can I ensure that the website ap ...

htmlcssmedia-queries

Issue with plain CSS animation not functioning in NextJS with Tailwind CSS

I found this amazing animation that I'm trying to implement from this link. After moving some of the animation code to Tailwind for a React Component, I noticed that it works perfectly in Storybook but fails to animate when running in next dev. It si ...

cssnext.jscss-animationstailwind-css

JavaScript generated form fails to submit

I am currently facing an issue with submitting form data to a PHP file when it is generated using JavaScript. I am unsure of how to resolve this problem. The form submission works fine on a test .html file by itself, but not when it is generated by JavaScr ...

javascriptphpjqueryhtmlforms

What is the most effective way to programmatically select checkboxes based on array values in

Trying to keep it concise :) Working on a project that generates multiple pages of thumbnail images with checkboxes. The total thumbnails vary and are sorted into 1000 item html pages, called by a parent html page via iframe. Goal is for users to check che ...

javascripthtmlarrayscheckbox

What is the best way to merge different Vue JS instances (each linked to different html divs) into one cohesive unit using Vue

Essentially, I have a scenario where I've created two HTML divs named vueapp1 and vueapp2. Both of these divs serve the same purpose of displaying information and are linked to their individual Vue instances for extracting JSON data and presenting it. ...

javascripthtmlvue.jsvue-component