Why my inline-block divs are not aligned when only one of them has text?
This is the consequence of the "baseline" vertical alignment in CSS. From the CSS 2.1 spec, section 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties
baseline
Align the baseline of the box with the baseline of the parent box. If the box
does not have a baseline, align the bottom margin edge with the parent's baseline. (my emphasis)
Because the default alignment for the inline-blocks is "baseline", unless it is overridden, this rule applies. When text is put in the inline-block, that text will create a baseline for the inline-block and the first (non-bolded) sentence applies.
When there is no text in the inline-block, then it has no baseline and so the second (bolded) sentence applies.
In the JSFiddle here: http://jsfiddle.net/WjCb9/1/ I have removed from your example the margin:1em
which was creating (at least for me) a misleading illusion, and added the text baseline
to show where the baseline of the containing box is. The baseline is along the bottom of the word "baseline", so you can see that the empty inline-block has its bottom margin edge aligned with the parent's baseline as required by the CSS rule above.
Why are these two inline-blocks not aligned?
Do vertical-align:top
on whatever has inline-block.
.calendar { vertical-align: top; }
Explanation: inline-blocks are still "in-line" and the vertical alignment is baseline meaning they aren't consistent and it will vary on their height, top makes them consistently start at the top.
Two divs with inline-block style not aligned
By default, inline
and inline-block
elements are set to vertical-align: baseline
.
Since your div.logo
has a text input, div.form
which is now an inline-block
element, aligns itself on the baseline of the input
.
Adding vertical-align: top
to the CSS should fix it. As in:
div.logo, div.form {
display: inline-block;
height: 200px;
width: 200px;
border: 1px dotted;
vertical-align: top;
}
div.logo, div.form { display: inline-block; height: 200px; width: 200px; border: 1px dotted; vertical-align:top;}
<div class="logo"> <input type="text"></div>
<div class="form">
</div>
Side by side divs not aligning
Add vertical-align: top
to #left
and #right
.
#left { text-align: center; display: inline-block; vertical-align: top; width: 40%;}
#right { text-align: center; display: inline-block; vertical-align: top; width: 40%; border-left: 2px double #cccccc;}
.container2 { height: auto; box-sizing: border-box;}
<div class="container2"> <div id="left"> <h4>Adress</h4> 238 Smoky Hollow St.<br> Billerica, MA 01821<br> Tel: 817-439-3708<br> MarioEisenhower@jourrapide.com </div>
<div id="right">
<h4> Working hours </h4> Monday - Friday 08:00 – 20:00<br> Saturday 08:00 – 14:00<br>
</div></div>
Div boxes not aligning properly using inline-block
Since the boxes are already inline-block
you can add vertical-align: top
to the .box
style.
Why don't two inline-blocks line up to the top in parent wrapper div?
You have a newline between the two div
s; since they are inline-block
, the newline between them is rendered as a space. Without space it works as you expect.
Why are two divs with display set to inline-block not vertically aligned?
Both images and text have whitespace allowances for descenders, being inline content. They happen to not be the same size.
A modern solution is flexbox.
.icon {
display: flex;
align-items: center; /* or 'start' (top), or 'end' (bottom) */
background: pink; /* for demo only */
padding: 8px; /* for demo only */
}
.image {
border: grey 1px solid;
font-size: 0; /* one way to eliminate descender space on images */
}
.name {
margin-left: 4px;
border: grey 1px solid;
height: 24px;
line-height: 24px;
}
<div class=icon>
<div class=image>
<img src="https://via.placeholder.com/48" width="24px" height="24px">
</div>
<div class=name>Name field</div>
</div>
Related Topics
A Singleton List of List Is Automatically Decomposed
Prevent Contenteditable Mode from Creating <Span> Tags
Div Not Expanding Even with Content Inside
Remove Element for Certain Screen Sizes
How to Position The Div Popup Dialog to The Center of Browser Screen
Drop Shadow on a Div Container
Rounded Corners on Divs with Background Color
Showing Scrollbars Only When Mouseover Div
Two Divs; Left Should Be Fixed Width, Right Should Fill Rest of Space
Change in Doctype Causes Webpage to Render Differently
Stacking Divs with Variable Height in 2 Columns Like Facebook Timeline
How to Vertically Align Label and Input in Bootstrap 3
Putting Buttons and Links Over Particles.Js Script (Z-Index)