CODEWITHSUNDEEP
htmlcss
Chris
Chris

Reputation: 23

Wrapped text in <p> changes <div> position

I have 4 divs with defined heights & widths, each contains a p element. In one case, the text from one p wraps to a second line. This changes the position of that div. Dev tools doesn't show any change in margin or padding for the parent div or the div whose position moved.

Here's my HTML:

<div id="holder">
  <div class="box"><p>I got words</p></div>
  <div class="box"><p>I got words too</p></div>
  <div class="box"><p>I got no words</p></div>
  <div class="box"><p>I got so many words that they wrap down</p></div>
</div>

Here's my CSS:

#holder {
  width: 100%;
  background: rgba(25, 25, 25, 0.9);
  text-align: center;
}

.box {
  height: 100px;
  width: 150px;
  background-color: green;
  display: inline-block;
}

and here's a link to the pen: https://codepen.io/Yeti_Detective/pen/rwNVXV

Upvotes: 0

Views: 56

Answers (3)

James Douglas
James Douglas

Reputation: 3446

Giving .box the style vertical-align: top; should do the trick.

#holder {
  width: 100%;
  background: rgba(25, 25, 25, 0.9);
  text-align: center;
}

.box {
  height: 100px;
  width: 150px;
  background-color: green;
  display: inline-block;
  vertical-align: top;
}
<div id="holder">
  <div class="box"><p>I got words</p></div>
  <div class="box"><p>I got words too</p></div>
  <div class="box"><p>I got no words</p></div>
  <div class="box"><p>I got a lot of words, but I no longer wrap down!</p></div>
</div>

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

When using display:inline-block, you need be aware that vertical-align:baseline - the default value - is still in effect.

What this means is that the inline-block elements are aligned according to the text baseline, which in the case of the two-line element is according to the bottom line.

#holder {
  width: 100%;
  background: rgba(25, 25, 25, 0.9);
  text-align: center;
}

.box {
  height: 100px;
  width: 150px;
  background-color: green;
  display: inline-block;
}

#marker {
  position: absolute;
  width: 304px;
  margin-top: -1em;
  border-top: 1px solid white;
}
<div id="holder">
  <div class="box"><p>I got words</p><div id="marker"></div></div>
  <div class="box"><p>I got so many words that they wrap down</p></div>
</div>

There are two ways to fix this. Option 1 is to add vertical-align:top to the boxes. This will do exactly what it says.

Option 2, which personally I prefer, is using display:flex on the container. You'll need justify-content: center to centre-align the boxes.

#holder {
  width: 100%;
  background: rgba(25, 25, 25, 0.9);
  text-align: center;
  display: flex;
  justify-content: center;
}

.box {
  height: 100px;
  width: 150px;
  margin: 0 4px;
  background-color: green;
}
<div id="holder">
  <div class="box"><p>I got words</p></div>
  <div class="box"><p>I got words too</p></div>
  <div class="box"><p>I got no words</p></div>
  <div class="box"><p>I got so many words that they wrap down</p></div>
</div>

Done :)

Upvotes: 1

Rtra
Rtra

Reputation: 522

You missed vertical-align:top; property Here is the fiddle https://jsfiddle.net/28afvwbd/1/

CSS code here 

#holder {
  width: 100%;
  background: rgba(25, 25, 25, 0.9);
  text-align: center;
}

.box {
  height: 100px;
  width: 150px;
  background-color: green;
  display: inline-block;
  vertical-align:top;
}

Upvotes: 0

Related Questions