This question already has answers here:
inline-block boxes not fitting in their container [duplicate]
(2 answers)
Mystery white space underneath image tag [duplicate]
(3 answers)
Closed 5 years ago.
I've these four div tags arranged in 2x2 grid (middle one only for line break)
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class=""></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
Along with this css:
.rectangle {
width: 25px;
height: 25px;
background: #ccc;
display: inline-block;
margin: 0px; /* doesn't work */
padding: 0px; /* doesn't work */
}
JSFiddle result output shows gaps between the rectangles. Is there a way to get rid of the gaps?
http://jsfiddle.net/brMPs/958/
You could either float the rectangles left or zero out the font size for the hidden spaces between the DIV tags. Here, try this adding a container div and using
.container {
font-size: 0;
}
http://jsfiddle.net/brMPs/963/
The reason you get the spaces is because, well, you have spaces between the elements (a line break and a few tabs counts as a space, just to be clear). Minimized HTML will solve this problem, or one of these tricks:
<div class="rectangle"></div><div
class="rectangle">
</div>
<div class=""></div>
<div class="rectangle"></div><div
class="rectangle">
</div>
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
why the layout is messed up?
why the p element is doing this?
why the first div is a little bit closer to the bottom of the page
#pricing div {
display: inline-block;
width: 30%;
height: 200px;
border: solid 2px black;
}
<section id="pricing">
<div id="plan-1m">
<!--try without p -->
<p>why this p messes up the layout?</p>
</div>
<div id="plan-3m">
</div>
<div id="plan-12m">
</div>
</section>
You should add vertical-align: top; to your div element.
The default value is vertical-align: baseline;, and for what I understand from the documentation, it tries to align the bottom of your p with the bottom of other divs (because they don't have any content)
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically align elements in a div?
(28 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 2 years ago.
I'm having a large div section divided into three columns (it's set to be displayed as a table so every column would be the same height), and I need to vertically center-align the elements (cards) that are located inside each column.
I tried to vertically align the elements (cards) by adding position: relative to the column's class, and adding the following code to the relevant cards' classes:
position: absolute;
top: 50%;
transform: translate(-50%);
But instead of working, it completely messed up and destroyed the page's structure.
I also tried to use vertical-align: middle, but it did absolutely nothing.
This is part of the code that I'm currently having (without the coding attempts mentioned above):
<div id="cards">
<div class="col">
<div class="card card-cyan">
<h2>Supervisor</h2>
<p>Monitors activity to identify project roadblocks</p>
</div>
</div>
<div class="col">
<div class="card card-red">
<h2>Team Builder</h2>
<p>Scans our talent network to create the optimal team for your project</p>
</div>
<div class="card card-orange">
<h2>Karma</h2>
<p>Regularly evaluates our talent to ensure quality</p>
</div>
</div>
<div class="col">
<div class="card card-blue">
<h2>Calculator</h2>
<p>Uses data from past projects to provide better delivery estimates</p>
</div>
</div>
</div>
#cards {
padding-left: 8%;
padding-right: 8%;
display: table;
}
.col {
display: table-cell;
padding: 2%;
}
.card {
border-radius: 10px;
border: none;
background-color: #ffffff;
padding: 2%;
width: 100%;
}
Any ideas on how to solve this trouble?
This question already has answers here:
How to remove border from elements in the last row?
(7 answers)
Closed 2 years ago.
I know the title of the question is kinda confusing, so I will try to explain better what I want to say.
Let's say that I have a group of elements, like a grid.
- This grid can be uneven
- This grid can have any number of columns
This is an example of a grid of 3 columns, with 7 elements.
As you see I am drawing a line below some of the elements.
What I would like is to apply these styles to all elements, except the ones on the last row. No matter how many items this may contain.
How can I achieve this?
The markup is really as simple as you can imagine:
<div class="items">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
What I have right now is:
.item:nth-child(n + 4){
border-top: 1px solid black;
}
Since most approaches have already been shown out there, I will leave a hacky solution.
You can use a pseudo-element with position: absolute in the last item that will cover the whole horizontal width in bottom. The position: relative will be in the parent element.
.items {
position: relative;
}
.item:last-child:before {
content: "";
position: absolute;
bottom: -1px;
left: 0;
height: 2px;
background-color: #ffffff;
width: 100%;
}
This will not remove the borders, but hide them. It only works if the background is a solid color.
This question already has answers here:
Why doesn't percentage padding / margin work on flex items in Firefox and Edge?
(2 answers)
Percentage padding / margin on grid item ignored in Firefox
(2 answers)
Closed 4 years ago.
I've recently redesigned my website utilizing CSS grid and I've come across a specific problem with FireFox 52. I know FireFox has issues, so I'm looking for some help on how to solve this little layout issue.
https://codepen.io/Krazyhawk/pen/qyJmWQ
Example HTML
<div class="grid">
<div class="item"><div></div></div>
<div class="item">
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
</div>
<div class="item"></div>
</div>
Example CSS
.grid {
width: 1200px;
display: grid;
grid-template-columns: 60% 1fr;
}
.item:first-child {
background-color: blue;
padding-right: 30px;
}
.item:first-child > div {
position: relative;
padding-bottom: 56.25%;
background-color: purple;
}
.item:nth-child(2) {
background-color: yellow;
}
.item:nth-child(3) {
background-color: grey;
grid-column: 1/3;
margin-top: 16px;
height: 50px;
}
I have two columns, and one underneath. The left column has a div in it that is used as an iframe container. To make that iframe responsive, it gets its height using a padding-bottom percentage. The right column is just a column with content, as well as the bottom one.
The issue lies with the padding-bottom percentage. The grid layout isn't recognizes the height of the div with padding-bottom, therefore the bottom bar doesn't allow enough space atop of it.
The solution solves itself if the left column has a height, but that's something I'd like to avoid. Giving it a height and keeping it responsive would likely require some JS and the resize event once the layout got down to tablet size (liquid layout).
As far as I know, this layout issue is specific to FireFox 52 (normally would cut it loose, but there is still a good chunk of user percentage).
This question already has answers here:
Position fixed element with percentage width relative to container
(2 answers)
Closed 8 years ago.
I would like to make one of column in my layout fixed. Unfortunately when I make it fixed it doesn't fit to parent div width. Is there any way to achieve that.
Html:
<div class="row" style="margin-left: 100px;">
<div class="col-sm-9">
</div>
<div class="col-sm-3">Content</div>
</div>
Css:
.col-sm-9 { background: red; color: white; }
.col-sm-3 { background: blue; color: white; position: fixed; right: 0; }
Here is jsfiddle that demonstrate my problem: http://jsfiddle.net/F5VmF/2/.
You should remove your position fixed from your .col-sm-3 div, and insert another div inside it with a position absolute. And whenever you scroll the page, you will change the top position of that div. Here is the example. And here is the code.