My 5x5 grid seems to shift down when I add content to the div. Can someone help me understand why this is happening?
Here's an example on Codepen: Risk Matrix
My 5x5 grid seems to shift down when I add content to the div. Can someone help me understand why this is happening?
Here's an example on Codepen: Risk Matrix
Make sure to include vertical-align: top and margin-top: 3px;
.r5 > div, .r4 > div, .r3 > div, .r2 > div, .r1 > div {
border: 1px solid #000000;
display: inline-block;
height: 50px;
line-height: 50px;
margin: 4px 0 0;
text-align: center;
vertical-align: top;
width: 50px;
}
The reason for this issue is likely due to the content affecting the layout.
This provides an explanation for why it occurs.
When dealing with inline elements (such as inline-block), it's important to specify the vertical alignment of the text. Without specifying this, the content defaults to aligning based on the baseline, leading to layout inconsistencies.
When you specify the following CSS properties:
.r5, .r4, .r3, .r2, .r1 {
margin-left: 40px;
> div {
display: inline-block;
vertical-align: top; <-- this
width: 50px;
height: 50px;
border: 1px solid black;
line-height: 50px;
text-align: center;
}
}
The content aligns correctly as intended.
To resolve the issue, apply the CSS property overflow:hidden to the <div /> elements. This will prevent any margin or padding created by inner-nodes from overflowing the containing element.
Check out this demonstration: http://example.com/demo
I've been trying to adjust the position of a table in my project that contains an image. Currently, it is aligned to the left and I want to move it to the right. Here is the code for my table: <TD> <IMG SRC='http://farm8.staticflickr.co ...
I have come across many sources advising me to reset HTML by manually resetting numerous individual properties, as demonstrated here: https://css-tricks.com/overriding-default-button-styles/ Another approach I discovered in CSS is simply using: button: {a ...
I am struggling to create a vanilla JS function that will resize fonts in a container with a specified class. I came across this demo, which seemed promising. However, the 'Javascript' version uses the $() jquery selector to target elements, maki ...
Currently, I am in the process of implementing a data-table element using custom elements (web components). Each row in the table can contain different types of cells such as text, number, date, etc. For example: <my-table> <my-table-cell-te ...
Embedding a PDF on a webpage is usually a simple task by using <embed src="a.pdf" width="500" height="400" type="application/pdf"> However, this method doesn't seem to work with the Chrome browser on Andr ...
Here is my current situation: http://jsfiddle.net/w6PAC/3/ I am looking to position the select button next to the count without affecting the vertical size and alignment of the list item. Methods I have attempted include: Creating CSS based on the .ul- ...
While using bootstrap-3, the .well class can be utilized to create a rounded border around an element with a gray background color and padding. <div class="well">Basic Well</div> However, it seems that there is no .well class available in boo ...
My table has a large number of dynamic rows, and when I try to print or preview it using the window.print() function, only the table header (thead) appears on the first page. How can I make sure that the table header appears on each printed page? <div ...
I am currently facing an issue where I have a script that utilizes ajax to receive a response containing a cart string (html code) with items from the cart. Inside the response handler, there is another script that sets the height of each div in the cart s ...
My goal is to create 4 divs, each with a width of 3 columns and a 3px border. I have successfully added the columns with borders, but I can't seem to get the border-box property to work as intended. I believe that I need the border to be an inner bord ...
Hello, I'm looking to customize the font color of the links in my Bootstrap navbar. I've attempted to apply specific classes to the navbar as suggested in related posts, but so far I've only been successful in changing the font of the navbar ...
After coming across a tutorial on CSS3 transform by David Desandro, I tried implementing the code but unfortunately, it does not work in Internet Explorer... I noticed that clicking "flip" only results in Card 1 being displayed while card 2 remains hidden ...
I'm currently working on mastering Bootstrap. My goal is to have a prominent heading followed by three small badge-pills that are horizontally centered on the page. However, I've run into a couple of issues: 1- The badge-pills are appearing stac ...
Attempting to incorporate some fancy animations into my project, but running into layout issues when using position: absolute for the animation with transform. export function SlideLeft() { return trigger('slideLeft', [ state('void&a ...
I've been tasked with editing a pre-existing web page, and I'm currently dissecting some code within it. The specific item under scrutiny is a list element containing a span. Interestingly, this span solely possesses a class attribute, lacking an ...
My custom responsive accordions are not functioning as expected. The requirement is to display headings and content for desktop view, but switch to accordions on smaller devices. I have managed to do this, however, when resizing the window, the functionali ...
I am in the process of creating a form that offers 3 different payment options: 1 - Direct Deposit 2 - Credit Card 3 - Cash at Office The issue I am facing is with the validation of input fields for Credit Cards. I want to make it so that these field ...
While designing an email template in html/css for a mailing list, I encountered an issue where on mobile devices the line breaks after the first word for every paragraph. You can see an example of this problem here. The code for the email template was gen ...
Here is a visual representation of the list I am working with: -------------------- | | | | 1 | 2 | | | | | 3 | 4 | | | | | 5 | 6 | | | | -------------------- Th ...
I am attempting to create a div that is based on percentages, and I want to nest a div inside another. Specifically, I want the center (xyz div) to only take up 90% of the height of the content-div. My goal is for the "content" div to be responsive to 90% ...