CSS - Inline-block Misalignment

Question

On the second example, why does the second div block starts from the bottom of the first inline-block but the first example is working as intended?

.working-left {
  background-color: green;
}

.working-right {
  background-color: red;
}

.left-panel {
  display: inline-block;
  width: 220px;
}

.right-panel {
  display: inline-block;
}

First Example
<div>
  <div class="left-panel working-left">
    Working Left Panel
  </div>
  <div class="right-panel working-right">
    Working Right Panel
  </div>
</div>
<br><br>
Second Example
<div>
  <div class="left-panel">
    asd
  </div>
  <div class="right-panel">
    Drumstick boudin fatback hamburger, ground round pig porchetta. Tenderloin short ribs pork prosciutto meatloaf, strip steak ground round. Shoulder jerky biltong, t-bone shankle tri-tip venison boudin prosciutto leberkas turkey pancetta alcatra ham hock pastrami. Tenderloin ground round rump chuck boudin meatball capicola strip steak tail corned beef prosciutto short ribs tongue jerky. Brisket shankle prosciutto meatloaf porchetta jowl biltong cupim flank sirloin beef shoulder pork chop. Landjaeger brisket jowl, cupim buffalo spare ribs swine drumstick shoulder.
  </div>
</div>

Because your blocks will take as much width as they need, and will move out of the way to a new line when too large. Try giving them different width and you will see them 'line up' again. You might be looking for `flexbox` instead of `inline-block`. — somethinghere, Apr 10 '18 at 08:42

score 1 · Answer 1 · answered Apr 10 '18 at 08:44

In the second example it comes down as it don't have enough space to accompany it.

Currently i have added with to ".right-pannel" class, then both will be on the same row.

.working-left {
  background-color: green;
}

.working-right {
  background-color: red;
}

.left-panel {
  display: inline-block;
  width: 220px;
}

.right-panel {
  display: inline-block;
  width: 200px;
  vertical-align: top;
}

First Example
<div>
  <div class="left-panel working-left">
    Working Left Panel
  </div>
  <div class="right-panel working-right">
    Working Right Panel
  </div>
</div>
<br><br>
Second Example
<div>
  <div class="left-panel">
    asd
  </div>
  <div class="right-panel">
    Drumstick boudin fatback hamburger, ground round pig porchetta. Tenderloin short ribs pork prosciutto meatloaf, strip steak ground round. Shoulder jerky biltong, t-bone shankle tri-tip venison boudin prosciutto leberkas turkey pancetta alcatra ham hock pastrami. Tenderloin ground round rump chuck boudin meatball capicola strip steak tail corned beef prosciutto short ribs tongue jerky. Brisket shankle prosciutto meatloaf porchetta jowl biltong cupim flank sirloin beef shoulder pork chop. Landjaeger brisket jowl, cupim buffalo spare ribs swine drumstick shoulder.
  </div>
</div>

score 0 · Answer 2 · answered Apr 10 '18 at 08:45

0

you got to restrict the width of "right-panel" in order to align it just beside the "left-panel" (making use of "display: inline-block" is to give widths etc. unlike "display: inline")

answered Apr 10 '18 at 08:45

Spushika Mulakala

126
1
3

score 0 · Answer 3 · answered Apr 10 '18 at 08:51

You set up a width for the left panel which is fine but it means you should set up a width for the other one to make them aligned because the second right panel has a lot of text so it takes all the space. If you reduce the text to one word on the second right panel you will get the same as the first example. Please check the following link for details : Display inline-block vs float

score 0 · Answer 4 · answered Apr 10 '18 at 09:06

You have to specify the width property for the right-panel too, otherwise it'll take as much as width for it to fit in the view. Either set width using % property(like for right-panel 20% and say 70% for left-panel) or set width precisely using px (like 200px for right-paneland 400px for left-panel). Use as per your convenience.

CSS - Inline-block Misalignment

4 Answers4