Displaying error message without moving elements located under

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

Answers


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.

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>

Need Your Help

How to do memcached sessions with django 1.8

python django memcached

In my django 1.6 app I did the following to get cached sessions and I'm curious if any of this has changed for django 1.8. The goal here is 100% in memory sessions so a restart will wipe the slate ...

How to restrict to one session (not login) per computer

php session cross-browser session-variables

I'm making a survey site and I'm trying my hardest to avoid user logins - I want people who answer my surveys to be anonymous members of my university, who open a link and answer the questions dire...