Displaying error message without moving elements located under

Question

The goal is to add a text error message without moving the element 4. Is it possible with css or javascript ?

Answer 1

When you add an element to the document flow, it will take up some space, causing the content below it to move down. To prevent this from happening, you have basically two options:

1. Keep the element out of the flow. There are several ways to achieve this, one possible being position: absolute.
2. Have the element take up its required space even when not visible. You could keep the element in the flow, but hide it using opacity: 0 or maybe visibility: hidden. That way the space it needs is already reserved in the flow.

Answer 2

position:absolute or negative margin

div{
  height:24px;
  margin:10px 10px 0;
  border:1px solid;
}
.somethinglarger{
  margin-top:40px;
  height:36px;
}
.error{
  margin-bottom:-36px; /* 24px-height, 10px-margin top, 2px-border*/
}
.error2{
  position:absolute;
  
}
.col{
  width:30%;
  height:auto;
  float:left;
  margin:0;
}

<div class="col">
<div class="somethinglarger">
  Content 1
</div>
<div>
  Content 2
</div>
<div>
  Content 3
</div>
<!--div class="error">
  Error message
</div-->
<div class="somethinglarger">
  Content 4
</div>
</div>
<div class="col">
<div class="somethinglarger">
  Content 1
</div>
<div>
  Content 2
</div>
<div>
  Content 3
</div>
<div class="error">
  Error message
</div>
<div class="somethinglarger">
  Content 4
</div>
</div>
<div class="col">
<div class="somethinglarger">
  Content 1
</div>
<div>
  Content 2
</div>
<div>
  Content 3
</div>
<div class="error2">
  Error message
</div>
<div class="somethinglarger">
  Content 4
</div>
</div>