Text divs won't line up straight

Question

So I have got these text divs in a separate wrap to what is above, and for some reason as soon as there is <p> tag text in them, they go all whack. I have attached my code as well as a snippet from my point of view.

/*description under images*/

#inline-2 {
  display: inline-block;
  background-color: green;
}

.discription-wrap {
  width: 100%;
  height: 240px;
  margin-top: 5px;
}

.dental-2 {
  width: 290px;
  height: 240px;
  margin-left: 310px;
  margin-bottom: 20px;
}

.appliances-2 {
  width: 290px;
  height: 240px;
  margin-left: 57px;
}

.timber-2 {
  width: 290px;
  height: 240px;
  margin-left: 60px;
}

.dental-2 p {
  width: 100%;
  padding: 0;
  margin-top: 20px;
  color: white;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

.appliances-2 p {
  width: 100%;
  padding: 0;
  margin-top: 20px;
  color: white;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

.timber-2 p {
  width: 100%;
  padding: 0;
  margin-top: 20px;
  color: white;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

<!--description under images-->
<div class="discription-wrap">
  <div class="dental-2" id="inline-2">
    <p>Tecco is a supplier of Dental products ranging from equipment, disposables to bone graft material. We offer a one stop shop for all your dental product requirements. Our main markets are East &amp; West Africa.
    </p>
  </div>

  <div class="appliances-2" id="inline-2">
    <p>If you are looking to enter the Chinese market but are worried about the risks involved, the Tecco Group team can assist. With our specialized product sourcing team, it is easy for you to find the products you are looking for. We assist with finding
      your product, quality control, shipping and everything in between.
    </p>
  </div>

  <div class="timber-2" id="inline-2">
    <p>Tecco sources New Zealand Radiata Pine for it's clients in China. Typically used in high end furniture. Clears, Kiln dried, rough sawn.
    </p>
  </div>
</div>

here is a sample from my view

what is the problem? am I suppose to guess what you want to happen? — vsync, Jun 25 '17 at 15:00

score 0 · Answer 1 · answered Jun 25 '17 at 15:04

Add vertical-align: top to #inline-2 - by default inline-blocks align along their baseline, which in this case is the last line of text in them.

/*description under images*/

#inline-2 {
  display: inline-block;
  background-color: green;
  vertical-align: top;
}

.discription-wrap {
  width: 100%;
  height: 240px;
  margin-top: 5px;
}

.dental-2 {
  width: 290px;
  height: 240px;
  margin-left: 310px;
  margin-bottom: 20px;
}

.appliances-2 {
  width: 290px;
  height: 240px;
  margin-left: 57px;
}

.timber-2 {
  width: 290px;
  height: 240px;
  margin-left: 60px;
}

.dental-2 p {
  width: 100%;
  padding: 0;
  margin-top: 20px;
  color: white;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

.appliances-2 p {
  width: 100%;
  padding: 0;
  margin-top: 20px;
  color: white;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

.timber-2 p {
  width: 100%;
  padding: 0;
  margin-top: 20px;
  color: white;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

<!--description under images-->
<div class="discription-wrap">
  <div class="dental-2" id="inline-2">
    <p>Tecco is a supplier of Dental products ranging from equipment, disposables to bone graft material. We offer a one stop shop for all your dental product requirements. Our main markets are East &amp; West Africa.
    </p>
  </div>

  <div class="appliances-2" id="inline-2">
    <p>If you are looking to enter the Chinese market but are worried about the risks involved, the Tecco Group team can assist. With our specialized product sourcing team, it is easy for you to find the products you are looking for. We assist with finding
      your product, quality control, shipping and everything in between.
    </p>
  </div>

  <div class="timber-2" id="inline-2">
    <p>Tecco sources New Zealand Radiata Pine for it's clients in China. Typically used in high end furniture. Clears, Kiln dried, rough sawn.
    </p>
  </div>
</div>

Text divs won't line up straight

1 Answers1