Hans Pede Hans Pede - 3 months ago 10
CSS Question

info messages causes a designproblem

Imagine I have

<div class="infomessage">

<p> message </p>
<p> message2 </p>

</div>


Due to I use some ajax that sometimes will overwrite this
<div>
with error messages, the design will fly up and down crazy (top and bottom). Those error messages is not much higher or lower than those 2
<p>
messages above which is why I would like to use a fixed height. What kind of css code do I need to use to keep some kind of fixed height indside this
<div>
?

Answer

If you would like to use a fixed minimum height, you can use min-height to set a minimum height for an element disregarding its content:

.infomessage {
  padding: 0 10px;
  margin: 10px;
  border: 1px solid;
  min-height: 100px; /* <- */
}
<div class="infomessage">
  <p>message</p>
  <p>message2</p>
</div>

<div class="infomessage">
  <!-- no content -->
</div>

See MDN for more information about min-height.