DIV | Display Property | Not Working as expected

user_14557034 0
Viewed 47

I have the following HTML code:-

<html>
  <head>
    <meta charset="utf-8">
    <title>Personal Site</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
         <div class="header1">
           hello world
         </div>
         <div class="header2">
         </div>
         <div class="header3">
         </div>
    </body>
</html>

Below is the style defined in the style sheet:-

.header1{
  background-color: yellow;
  width: 35%;
  height: 200px;
  display: inline-block;
}
.header2{
  background-color: blue;
  width: 30%;
  height: 200px;
  display: inline-block;
}
.header3{
  background-color: green;
  width: 34%;
  height: 200px;
  display: inline-block;
}

I am getting the following output:-

Output of the code

Question: Despite defining my display property as inline-block, why is the yellow box along with Hello World going in the second line? If I remove the text Hello world then all three box lines up together? Can someone please explain this behavior?

html
3 Answers

The inline-block display property treats block level elements (e.g. ) as an inline element (e.g. ), and, just like if you had a line break between two elements, the line-break between the s is creating a space between the s. That extra margin is actually a space—not a margin.

ref: more details...

apply 'float:left'  to each header block.
.header1{
      background-color: yellow;
      width: 35%;
      height: 200px;
      display: inline-block;
      float:left;
    }
.header2{
      background-color: blue;
      width: 30%;
      height: 200px;
      display: inline-block;
      float:left;
    }
.header3{
      background-color: green;
      width: 35%;
      height: 200px;
      display: inline-block;
      float:left;
    }
user_40162800

Seems to be a quirk of inline-block. If you add vertical-align:top; it sorts it out.

.header1{
  background-color: yellow;
  width: 35%;
  height: 200px;
  display: inline-block;
  vertical-align:top;
}
.header2{
  background-color: blue;
  width: 30%;
  height: 200px;
  display: inline-block;
  vertical-align:top;
}
.header3{
  background-color: green;
  width: 34%;
  height: 200px;
  display: inline-block;
  vertical-align:top;
}
user_120018770

The following is a theory, based on reading the Visual formatting model document provided by the W3C. I'm most likely wrong on at least part of this, but:

By applying display: inline-block to the div elements, the end result is

  • the divs themselves are inline
  • the content inside each div gains a, let's call it a "virtual container", that's a block element (or treated as such).

Inline elements collapse to the height and width of their content. In the second and third divs, since those are empty, means those collapse to a height of 0. The boxes you see are actually the inner content overflowing the parent divs.

The three elements all have a default vertical-align value of baseline, so I suspect what you're ultimately seeing is three divs aligned in a row, to the baseline of the first div, but then the bottom of the inner content of the latter divs is aligning to the baseline of the first div, with their tops pushing the whole row down from the top of the page.

Adding the the old "has-layout" trigger will cause the inline elements to resize to fit their content, if that's all you're after (you'll want to run this with the full-screen option to see it correctly):

        .my-block{
          height: 200px;
          display: inline-block;
          /* these rules applied together trigger hasLayout */
          /* see https://webplatform.github.io/docs/css/cssom/properties/hasLayout/ */
          overflow: auto;
          zoom: 1;
        }

        .header1{
          background-color: yellow;
          width: 35%;
          font-size: 25px;
        }
        .header2{
          background-color: blue;
          width: 30%;
        }
        .header3{
          background-color: green;
          width: 34%;
        }
<html>
    <head>
        <meta charset="utf-8">
        <title>Personal Site</title>
    </head>
    <body>
        <div class="header1 my-block">
            hello world
        </div>
        <div class="header2 my-block">
        </div>
        <div class="header3 my-block">
        </div>
    </body>
</html>

Changing the vertical-align to top or bottom would yield the same effect in your example, although you'd need to make sure either of those alignments make sense in your "real" code.

user_5341090
Related