This question already has answers here:
Using display inline-block columns move down
(2 answers)
Closed 9 years ago.
I have three inline-block divs like this:
<div style="display:inline-block">div1</div>
<div style="display:inline-block; padding-top:5px">div2</div>
<div style="display:inline-block">div3</div>
I added a padding to the second div to display it a little lower, but this makes others divs to go down as well. How to make only the second div to display lower?
Here is a JSFiddle: http://jsfiddle.net/mY6hP/
The same thing was asked here, but the accepted answer suggests using absolute positioning, which i would not like to do.
Change the alignment on the other divs so they allign themselves at the top (via vertical-align:top;):
<div style="display:inline-block; vertical-align:top;">div1</div>
<div style="display:inline-block; padding-top:5px">div2</div>
<div style="display:inline-block; vertical-align:top;">div3</div>
Try float:left instead of inline-block display:
<div style="float:left">div1</div>
<div style="float:left; padding-top:5px">div2</div>
<div>div3</div>
Related
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 4 years ago.
I have three nested DIV elements.
When I insert margin-top into the inside div all others receive the effect.
I need the inside div to have a margin-top relative to the outside div and not the whole block.
I created an example in codepen. I have one div, two div and three div.
Notice that I put the margin-top in div three, but all divs receive the effect.
Does anyone know the reason?
<div class="um">
<div class="dois">
<div class="tres" style="margin-top: 50px;">
conteudo
</div>
</div>
</div>
example codepen
use padding-top instead of margin-top.
<div class="um">
<div class="dois">
<div class="tres" style="padding-top: 50px;">
conteudo
</div>
</div>
</div>
default value tag div is display:block, add css on um class display:flex
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
I'm Coding a sign in/sign up website, the css is very basic at this time along with basic js (I plan on polishing css). But I want to get the basic css done before working on html, one element of my website is an h3 element that I want to have a margin that pushes from the bottom of one of the selection divs but the margin is pushing from the top of the body rather than the containing div.
<div id="container">
<div id="leftFloat" class="50%">sign in</div>
<div id="rightFloat" class="50%">sign up</div>
<div id="rightFloat" class="50%">
<h2 id="selection" class="margin: 50px;">Pushes the container down rather than pushing itself down</h2>
</div>
</div>
This is what i want When Using The Margin
This is what i get when using the margin
Use clear:both for h2 as shown below:
h2{
clear: both;
}
This question already has answers here:
My inline-block elements are not lining up properly
(5 answers)
Why are these two inline-blocks not aligned? [duplicate]
(2 answers)
Vertically aligning relative inline block with non-relative inline blocks [duplicate]
(1 answer)
Display inline block text inside issue
(3 answers)
Closed 5 years ago.
My problem is that i'm trying to get three entirely independent columns and with 'display: inline-block', my columns get side by side but starts under the biggest.
HTML, CSS:
.container > div {
display: inline-block;
}
<body>
<div class="container">
<div>
aaaaaaa<br>bbbbbb
</div>
<div>
cccccc<br> ddddddd<br>eeeeeee
</div>
<div id="end">
ffffff
</div>
</div>
</body>
The problem is that the smallest line is aligned to the last line of the biggest div, as follows:
When dealing with inline-level and table cell elements, the vertical-align property applies. The initial value of this property is baseline. That's what you're seeing. The text in each box is aligned to the baseline. Adjusting the vertical-align property to another value (such as top) solves the problem.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
Found the solution, although i don't think it's the best way to do this:
.container > div {
vertical-align: top;
}
:)
You could add css property vertical-align: top, that way all content will start at the top of the div.
.container > div {
display: inline-block;
vertical-align:top
}
<body>
<div class="container">
<div>
aaaaaaa<br>bbbbbb
</div>
<div>
cccccc<br> ddddddd<br>eeeeeee
</div>
<div id="end">
ffffff
</div>
</div>
</body>
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 8 years ago.
I want a parent div to be the height of the child image, like so:
<div class="container one">
<img src="http://placehold.it/250x250" />
</div>
The div should be exactly 250px tall. For Illustration, I created a JSFiddle here.
Now what is actually happening in FF and Chrome is that the div is just a bit taller, maybe 3 to 5 pixels.
I would like to avoid having to do nesting with unnecessary purely cosmetic markup like
<div class="container one">
<div class="inner">
<img src="http://placehold.it/250x250" />
</div>
</div>
or similar.
I feel like this is horribly obvious but I just can't make any sense of it.
<img> is an inline element and adds that extra space below due to that fact. Fix it with
img {
display: block
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Make outer div be automaticly the same height as its floating content
Hi I have code like this
<div id="wrapper">
<div id='float-left-1'>...</div>
<div id='float-left-2'>...</div>
<div id='float-left-3'>...</div>
</div>
When I run this page it happens that wrapper is not around divs inside... How can I solve this? Float divs are over the wrapper...
Thanks for answer in advance!
I solved the problem...
All the float divs were added:
position: relative;
float: left;
at the end I have added:
<div style="clear:both"></div>
and now it works perfect... it did the trick!