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)
Related
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:
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/
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.
This question already has answers here:
Centered div and fluid left padding over the container
(2 answers)
Closed 9 years ago.
I have a centered red div (blue) with a max width (1240px) in my layout and I search to make this in CSS. The logo area (purple) from the left of the centering area (blue) is 300px. At the left of this point, in red, it will be fluid (whatever the screen resolution you have).
(btw, that's the same thing for the lightgray div just below)
Do you have an idea to do that?
Here, have a look at this one:
http://css-tricks.com/the-perfect-fluid-width-layout/
Do something like this:
FIDDLE
<div class="container">
<div class="logo">
logo here
</div>
</div>
CSS
.container{
width: 1240px;
background: orange;
text-align: center;
margin: 0 auto;
}
.logo{
width: 180px;
height: 100px;
border: 1px solid black;
display: inline-block;
}
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I'm struggling a bit with this CSS-issue: http://jsfiddle.net/timkl/JbEX8/
I want two divs to align horizontally using "display: inline-block", however when I add text to one of the divs, the alignment is off.
Is there a way to make the two divs align without resorting to floats?
This is my markup:
<div class="box">
<p>Some text</p>
</div><!-- /box -->
<div class="box">
<!-- No text -->
</div><!-- /box -->
This is my CSS:
body {
color: gray;
}
.box {
background: #ccc;
height: 100px;
width: 200px;
display: inline-block;
}
Check out my example on jsfiddle: http://jsfiddle.net/timkl/JbEX8/
Add vertical-align to class box:
vertical-align: middle;
Also see the updated jsfiddle.
You should float them:
.box {
float: left;
background: #ccc;
height: 100px;
width: 200px;
display: inline-block;
}
Demo: http://jsfiddle.net/JbEX8/1/
Do note that since you didn't define margins, there is no spacing between them.