The scaling of the attribute element appears to be off-kilter

https://i.sstatic.net/QmE8k.png

.customProgramTemplate {
  background-color: rgba(0, 0, 0, 0.75);
  width: 400px;
  height: 185px;
  border-radius: 8px;
  margin: auto;
  color: white;
  padding: 0;
}

.customProgramButton {
  text-decoration: none;
  text-align: center;
  padding: 0;
}
<a href="https://github.com/Necrosis000/Necrosis-Random-Colour-Generator" class="customProgramButton">
  <div class="customProgramTemplate">
    <p class="programTitle">Custom Programs</p>
    <p class="programDesc">Click here to go to a list of my custom programs/websites</p>
  </div>
</a>

I'm facing an issue where the width of my elements is exceeding the size of the div container. The blue part should fit around the red part but it's extending beyond and stretching across the entire screen.

The height seems to be fine, it's just the width that's causing trouble.

htmlcsselement

Answer №1

Summary:
To resolve the issue of a link covering the entire width, simply apply display: inline-block to the <a> element.

Elaboration:
The reason why the link covers the whole width is due to its default display type of inline. This causes it to expand based on its content width.
Since the direct child of the link is a div with a default display type of block, which naturally extends to fill the full row width, the issue arises.
If you were to set a width on the div without changing its display type, it would not have any impact on the layout.

I hope this explanation clarifies things for you.

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

The search icon will be positioned underneath the form input field

While working on a Bootstrap navbar with a search box, I encountered a problem on mobile devices. Everything looks fine at a screen width of 576px or above, but below that, the search icon moves under the input field. At 576px: https://i.sstatic.net/xWqKv ...

htmlcssbootstrap-4responsive-design

Content in Table TD with rowspan attribute is concealed by setting the visibility of TR to "collapse"

I have created an HTML table where some rows are hidden using CSS with visibility:collapse By default, only the first and last rows of the table are visible. In one column on the right side, I've set rowspan to accommodate multiple lines of text. T ...

htmlcsshtml-tablecss-tables

Issues with the alignment of card-footer in Bootstrap 5 card components

Looking to enhance the website for the electronics store I am employed at, I have encountered a challenge while constructing cards using Bootstrap 5. Initially, the cards varied in height until I managed to resolve the issue by setting the card height to 1 ...

htmlcssbootstrap-5

Could you please clarify the specific functionality of this script?

I've been trying to figure out the communication process between (a website that tracks real-time changes in Roblox's catalog and updates the client) and I came across this script while inspecting the site. It seems like this script is responsib ...

javascripthtmljson

Side Text for Floating Action Button

I've been working on incorporating labels to the left of my FAB, following the Material Design principles. Despite my efforts, I'm facing difficulties in getting the labels to display properly. I would greatly appreciate any advice or tips on how ...

htmlcsstwitter-bootstrapmaterialize

What methods can be used to keep divs from breaking onto separate lines?

My approach involves using divs to mimic a table structure. Below is the header section of this table: <div id="table-header"> <div id="header-row"> <div class="rate-rule-column s-boarder"> ...

htmlcss

What could be causing my select value to stay unchanged? Issue with the "selected" attribute or property

var original_role = $('option:selected', '#user_role').val(); $('#role_cancel').click(function() { //console.log(original_role); $('option:selected', '#user_role').removeAttr('selected'); //des ...

javascripthtmljquerydom

Halt the Bootstrap carousel while entering text in a textarea

Is it possible to achieve this? I think so. I have created a carousel with a form inside. The form includes a textarea and a submit button. Currently, the slider does not slide if the mouse pointer is inside it, which is good. However, if the pointer is o ...

javascriptjqueryhtmltwitter-bootstrap

Managing additional attributes and recording data - when forwarding to an external URL from a Django application

I integrated an HTML-based button for sharing on WhatsApp into my mobile web app created with Django: <a rel="nofollow" target="_blank" href="whatsapp://send?text=https://example.com" data-link="whatsapp://send?text=https://example.com" data-action="sh ...

htmldjango

What is the best way to add multiple classes to an HTML element?

Can a single HTML container have more than one class assigned to it? For example, would the following code work: <article class="column wrapper"> ...

htmlcss

Displaying a child component as a standalone page rather than integrating it within the parent component's body

I'm currently working on implementing nested navigation in my website, but I am facing challenges with loading the child component without the need to include a router-outlet in the parent component. This setup is causing the child component's co ...

htmlangulartypescripturlroutes

Live updates for downloads page menu using HTML and Bootstrap

I'm currently working on a menu page that features 3 tabs: Windows, Linux, Mac. When you click on the Windows tab, it will not only download the windows installer but also display installation instructions specific to Windows. Similarly, when you sele ...

htmlbootstrap-4

Issue with OpenLayers Icon not appearing on screen

I just finished creating a SpringBoot app using Spring Initializer, JPA, embedded Tomcat, Thymeleaf template engine, and packaging it as an executable JAR file. Within this app, I have integrated OpenLayers 4 library to display a map with an Icon. Howeve ...

javascripthtmlthymeleafopenlayersopenstreetmap

Using CSS to create a table with two columns

Greetings! I recently inherited a JavaScript application that includes a search window with the following code snippet. My goal is to have the text "Statistics Search" positioned above the Statistics label and checkbox. Next, I would like the remaining ro ...

htmlcss

Tips for showcasing a full body height background

I'm currently working on a project where I need to display random background images when the body loads. To achieve this, I've created a function. However, I'm facing an issue where the images are filling up the entire page, making it very l ...

javascripthtmlcssgoogle-chrome

Utilize a drop-down selector in JavaScript to search and refine the results

Looking for a way to enhance your product search form? Consider adding an option to select a specific shop from the dropdown menu. This will allow users to search for products within a particular store if desired. <form action="#" method="get"> &l ...

javascripthtml

Style a CSS underline of an element that is contained within a span

Kindly refer to the information provided below: <span class="caption"> {block:Caption}<p>{Caption}</p><hr>{/block:Caption} </span> The Caption block will include text, with a section of it being a hyperlink. How can I desig ...

htmlcss

javascript code producing incorrect HTML

I created a script to populate a selectbox with various options. Initially, the data is in the form of a string like this: "key=value;key2=value2;etc...": //splitting the string to separate different options for the selectbox var values = data.split(&apo ...

javascriptjqueryhtml

What is the best way to store plain HTML text in a database?

Currently, I am working on PHP source code to insert the page created using Quill text editor. Although the text editor data insertion is working fine, it is not inserting plain text as desired. My goal is to insert HTML plain text instead. Below is the J ...

phphtmlmysqli

What is the best way to insert horizontal padding into each line of a single sentence that is wrapped on multiple lines

Below is the code snippet I am working with: <div><p><span>... highlighted text ...</span></p><p>Chapter info</p></div> Here is a screenshot of how it currently appears: I am looking for a way to add paddi ...

csshtml