Why is the DIV with display inline-block falling out of place!

Hello,

To make the problem simple to explain, please look at this sample page I have set up:

http://www.notefab.com/test/divs_nxt_each_other.php

Why is the DIV with Blue background falling out of vertical alignment with other DIVs in the same line with:
display: inline-block;
when one just adds Text to it!!!
And what to do to get it back in same vertical position as other DIVs before and after it?

And then how does one get the Text in the Blue DIV to be vertically align inside that Blue DIV?

Thanks,

Hi there WorldNews,

add…

    vertical-align: top;

…to your “.holder” rules. :winky:

coothead

Hi there WorldNews,

you may also be interested in “display: flex;”

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }
.container {
    display: flex;
    justify-content: space-around;
    padding: 0.5% 0.25%;
    border: 0.062em solid #999;
    background-color: #fff;
 }
.container div {
    display: flex; 
    width: 24.5%;
    padding: 1em;
    border: 0.062em solid #666;
    box-sizing: border-box;
 }
.container div:nth-child(1) {
    background-color: #f00;
 } 
.container div:nth-child(2) {
    align-items: center;
    justify-content: space-around;
    background-color: #00f;
 } 
.container div:nth-child(3) {
    background-color: #ff0;
 } 
.container div:nth-child(4) {
    background-color: #008000;
 } 
</style>

</head>
<body> 
<div class="container">
 <div>
  <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
   bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
   posuere ac lorem ut, suscipit tincidunt leo.
  </p>
 </div>
 <div>
  <p>
   Hello World
  </p>
 </div>
 <div>
  <p>
   Donec vehicula diam non leo efficitur, id euismod odio tincidunt.
  </p>
 </div>
 <div>
  <p>
   Nam venenatis diam ante, et cursus elit porttitor at.
  </p>
 </div>
<!-- .container --></div>

</body>
</html>

coothead

@WorldNews,

The default alignment of inline and inline-block elements is baseline.

Anytime one uses “inline” or “inline-block”, he should consider the vertical alignment of the elements. Personally, when I assign “inline-block” to an element, I routinely include “vertical-align:…”

Please read (it’s concise).

You may wish to play (experience) here:
https://www.w3schools.com/cssref/pr_pos_vertical-align.asp

@coothead’s flex method rocks.

Just to be obnoxious, I am including a CSS display:table/table-cell solution because the code is similar to yours only simplified, I changed the IDs to classes. Please read the comments.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">  <!-- A character set should be decalared here! -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">  <!-- if needed for a responsive page -->
    <link rel="stylesheet" href="css/stylesheet.css">  <!-- if needed for an external stylesheet -->
    <title>template</title>  <!-- A TITLE is REQUIRED! -->
<!--
Nothing should be above the DOCTYPE, not even empty space, except a PHP declaration IF NEEDED.
https://www.sitepoint.com/community/t/why-is-the-div-with-display-inline-block-falling-out-of-place/274861
WorldNews
-->
    <style>
html {box-sizing:border-box;}
*,*:before,*:after {box-sizing:inherit;}
body {
    padding:0 1%;
    margin:0;
}
.continer {
    display:table;
    width:100%;
    border:3px solid gray;
    margin-top:25px;
}
.holder {
    display:table-cell;
    vertical-align:middle;
    width:25%;  /* may vary as needed by the content */
    height:100px;  /* treated as min-height */
    text-align:center;
    border:1px solid purple;
    color:white;
}
.red {background-color:#FF0000;}
.blue {background-color:#0000FF;}
.yellow {background-color:#E2BE22;}
.green {background-color:#008800;}
.tesy {
    border:1px solid red;
    width:300px;
    margin:0 auto;
}
    </style>
</head>
<body>

<div class="continer">
    <div class="holder red"></div>
    <div class="holder blue">Hello World</div>
    <div class="holder yellow"></div>
    <div class="holder green">
        <p class="tesy">So far, we've built web pages using HTML and styled them using CSS. Our pages look great, but they're not interactive �we can't drag elements around the page, open and close sliding panels, animate HTML elements, or add new elements to our HTML pages simply by clicking a button.</p>
    </div>
</div>
<div class="continer">
    <div class="holder red"></div><div class="holder blue"></div><div class="holder yellow"></div><div class="holder green"></div>
</div>

</body>
</html>
3 Likes

Coot,
That suggestion did work fine.
But this again demonstrates the bizarre illogical workings of the CSS.
And no rational way of reading to address these illogical workings.
I mean why in GODs name, should a DIV with display: inline-block; falls out of vertical position by just adding text to it! What sort of logic is that?
Sorry, I am just blowing steam :slight_smile: But I think rightly so.

ronpat, sorry but in NO way or how does reading the page:
https://www.w3schools.com/cssref/pr_pos_vertical-align.asp
lead one to the realization that adding:
vertical-align: top; to a DIV with display: inline-block;
would lead to that DIV into going back into its normal placement. Not even close.
And again this is the example of total lack of good documentation about advance CSS issues, beside CSS being illogical in regard to these advance issues.

You might find this page helpful, especially when read in conjunction with @ronpat’s link to the Mozilla reference on vertical-align.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.