How to set the same of top position for child elements

Question

I have code below. I don't know why the top position of div1 in 2 block are not the same. If div1 in child1 contains text or other element(s), the top position of div1 and div2, div3 is equal. Please show me the reason. Thank you so much.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
* {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>

<div id='parent' style='width: 100%;height:100%;background-color:blue;position:absolute;'>

<div id='child1' style='margin:auto auto;background-color:red;margin:10px;padding:10px;'>
  <div id='div1' style='width:50px;height:30px;background-color:grey;display:inline-block;'></div>
    <div id='div2' style='width:200px;height:30px;background-color:green;display:inline-block;'>
      <input type='text' value='Text' />
    </div>
  <div id='div3' style='width:50px;height:30px;background-color:green;display:inline-block;'>Text</div>
</div>

<div id='child2' style='margin:auto auto;background-color:red;margin:10px;padding:10px;'>
  <div id='div1' style='width:50px;height:30px;background-color:grey;display:inline-block;'>Text</div>
    <div id='div2' style='width:200px;height:30px;background-color:green;display:inline-block;'>
      <input type='text' value='Text' />
    </div>
  <div id='div3' style='width:50px;height:30px;background-color:green;display:inline-block;'>Text</div>
</div>

</div>

</body>
</html>

The name of elements are not unique is not very important problem. But I will notice in my code. Thank you so much. — Nguyen Van Tam, Dec 19 '19 at 07:51

Jerdine Sabio · Accepted Answer · 2019-12-19T02:10:56.470

The browser treat DIVs without content or text like images hence they are aligned to the baseline but if the DIVs have content, the content itself is aligned to the baseline and the container automatically adjusts.

To fix this, you could make a class child on your container and use vertical-align:bottom; on its first div.

.child>div:first-of-type {
   vertical-align: bottom;
}

See below;

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    
    .child>div:first-of-type {
      vertical-align: bottom;
    }
  </style>
</head>

<body>

  <div id='parent' style='width: 100%;height:100%;background-color:blue;position:absolute;'>

    <div id='child1' class="child" style='margin:auto auto;background-color:red;margin:10px;padding:10px;'>
      <div style='width:50px;height:30px;background-color:grey;display:inline-block;'></div>
      <div style='width:200px;height:30px;background-color:green;display:inline-block;'>
        <input type='text' value='Text' />
      </div>
      <div style='width:50px;height:30px;background-color:green;display:inline-block;'>Text</div>
    </div>

    <div id='child2' class="child" style='margin:auto auto;background-color:red;margin:10px;padding:10px;'>
      <div style='width:50px;height:30px;background-color:grey;display:inline-block;'>Text</div>
      <div style='width:200px;height:30px;background-color:green;display:inline-block;'>
        <input type='text' value='Text' />
      </div>
      <div style='width:50px;height:30px;background-color:green;display:inline-block;'>Text</div>
    </div>

  </div>

</body>

</html>

@MisterJojo changing the divs ids' won't fix the OP's problem since there isn't any css declaration for them anyway. Nevertheless, I updated the markup. — Jerdine Sabio, Dec 19 '19 at 07:44
@NguyenVanTam you're welcome, you could mark this as the correct answer if it addresses your problem. — Jerdine Sabio, Dec 19 '19 at 07:56

How to set the same of top position for child elements

1 Answers1