0

I want to have three divs on the same height and fill them with content. When I try to add a p-tag in the first div it is not aligned on the same height as the others:

#toDo,
#getBack,
#done {
    position: relative;
    padding: 5px;
    display: inline-block;
    width: 100px;
    border: 1px solid black;
    top: 0;
    min-height: 100px;
}
<div id="toDo">
    <p>hello</p>
</div>
<div id="getBack">
</div>
<div id="done">
</div>

The result should look like this: enter image description here

so that every div is on the same height.

How can I prevent it that the divs get an offset from top when they get filled with content? I already tried setting top=0; but it didn't change anything.

Philip F.
  • 1,167
  • 1
  • 18
  • 33

3 Answers3

1

Without adding other elements, you can just put vertical-align: top; to your CSS that also preserves the white space between the divs

#toDo,
#getBack,
#done {
    vertical-align: top;
    position: relative;
    padding: 5px;
    display: inline-block;
    width: 100px;
    border: 1px solid black;
    top: 0;
    min-height: 100px;
}
<div id="toDo">
    <p>hello</p>
</div>
<div id="getBack">
</div>
<div id="done">
</div>
Balastrong
  • 4,336
  • 2
  • 12
  • 31
0

You can add display: flex to the parent container

#wrapper {display: flex}
#toDo,
#getBack,
#done {
    position: relative;
    padding: 5px;
    display: inline-block;
    width: 100px;
    border: 1px solid black;
    top: 0;
    min-height: 100px;
}
<div id="wrapper">
<div id="toDo">
    <p>hello</p>
</div>
<div id="getBack">
</div>
<div id="done">
</div>
</div>
Richie Fredicson
  • 2,150
  • 3
  • 16
  • 19
0

You can use vertical-align:top; to align all inline-block div

#toDo, #getBack, #done{
vertical-align:top;
}
sarfaraj
  • 31
  • 2