HTML Inline-Block DIVs Not Lining Up
display: inline-block
is working correctly in your example. What you need to add is vertical-align: top
to your .topInfo
div
, and get rid of the default margin
on your .topInfo p
tag. Also, you need to make sure that there is enough room for the .topInfo
div
to sit to the side of the .topThumbnail
div
, otherwise it will wrap to the next line.
Like this:
http://jsfiddle.net/hsdLT/
My inline-block elements are not lining up properly
10.8 Line height calculations: the 'line-height' and 'vertical-align' properties
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
This is a common issue involving inline-block
elements. In this case, the default value of the vertical-align
property is baseline
. If you change the value to top
, it will behave as expected.
Updated Example
.position-data {
vertical-align: top;
}
`Display: Inline-Block` elements not aligning correctly
Just add vertical-align: top
to div.col
(by default an inline element has vertical-align
set to baseline
-- you just need to tell it align to the top instead).
div.canvas {
background-image: url(//www.transparenttextures.com/patterns/asfalt-dark.png);
padding: 100px 0;
background-color: #F2E394;
text-align: center;
}
div.col {
width: 50%;
display: inline-block;
vertical-align: top;
}
/* Device Mockups */
div#phone {
width: 540px;
height: 540px;
background: url(//i.imgur.com/ieBaiQ1.png);
background-size: contain;
background-position: center center;
position: relative;
margin: 0 auto;
}
div#phone div.frame {
position: absolute;
top: 85px;
bottom: 85px;
left: 165px;
right: 165px;
overflow-x: hidden;
overflow-y: auto;
border-radius: 3px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
background: white;
}
<div class="canvas"> <div class="col"> <div id="phone"> <div class="frame"> </div> </div> </div><div class="col ta-l"> <h1>Header 1</h1> </div></div>
inline-block elements not lining up
You can add vertical-align: top;
to the divs.
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.
HTML/CSS Issues with aligning to 'inline-block' elements side by side
This Works:
vertical-align: top;
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.
Related Topics
Can't Scroll to Top of Flex Item That Is Overflowing Container
How to Center a "Position: Absolute" Element
When Flexbox Items Wrap in Column Mode, Container Does Not Grow Its Width
What Are the Default Margins For the HTML Heading Tags (≪H1≫, ≪H2≫, ≪H3≫, etc.)
What Is the Default Form Http Method
What Is the Order of Precedence For Css
One Flex/Grid Item Sets the Size Limit For Siblings
Flex/Grid Layouts Not Working on Button or Fieldset Elements
How to Align 3 Divs (Left/Center/Right) Inside Another Div
Which HTML Elements Can Receive Focus
Fixed Page Header Overlaps In-Page Anchors
How to Disable Equal Height Columns in Flexbox
Proper Use of Flex Properties When Nesting Flex Containers
Why Doesn't Nth-Of-Type/Nth-Child Work on Nested Elements
Show Placeholder Text for Input Type Date
Inserting Form Data into MySQL Database When Using Nodejs Express