Hans Pede Hans Pede - 1 year ago 53
CSS Question

info messages causes a designproblem

Imagine I have

<div class="infomessage">

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


Due to I use some ajax that sometimes will overwrite this
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
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

Answer Source

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">

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

See MDN for more information about min-height.