Filling a certain amount of whitespace on website

Question

In my web app I use the following CSS to provide notices/error messages:

#notice { 
  border: 1px solid green; 
  padding: 1em; 
  margin: 1em; 
  margin-bottom: 2em; 
  background-color: lightgreen; 
  font: bold sans-serif;
  color: darkgreen 
}

But when a notice isn't required, I want to have white space equal to the amount of space that this notice would've taken up. I want to do this so that my web pages look consistent, and items on the page aren't shifted up/down according to whether there is a notice or not.

Answer 1

You can set a fixed height and width for the div.

#notice {
   ....
   height: 200px;
   width: 100%;
}

Alternatively, you may use min-height and min-width.

Answer 2

I have done this by setting a fixed height.

I've also heard the argument that its okay to have the page bump down, (that's how stackoverflow works) because it draws attention to the message and that is a good thing.

Answer 3

The solution can depend on how you want to / have to implement this notice block. If you update the page with Ajax (without graceful degradation, a JS off fallback to normal state) I strongly recommend to do this with modal windows like Facebook - its nice and handy. If you did not have the chance to use modal windows it could be something like:

#notice{ height: 100px; margin: 1em 1em 2em } /* #notice can be a wrapper with basic dimensions */
.error{ border: 1px solid red; } /* reuse the same block */
.info{ border: 1px solid green; } /* reuse the same block */

And the HTML respectively:

<div id="notice"></div>

Error state:

<div id="notice" class="error"> Your error message </div>

Info state:

<div id="notice" class="info"> Your info message </div>

Of course you can run into problems with the #notice div height when the message is too long but that is an other problem :)

Answer 4

I'm assuming the div with #notice won't be there if you don't need it. Why not use the adjacent selector like this. It won't work in some browsers like IE6. Give the element following it the class of "following" or something similiar. There will still be a bit of a difference because you have the 2px from the border in there.

#notice {
  border: 1px solid green; 
  padding: 1em; 
  margin: 1em; 
  margin-bottom: 2em; 
  background-color: lightgreen; 
  font: bold sans-serif;
  color: darkgreen 
}
.following {
    margin-top:4em
}
#notice + .following {
    margin-top:2em;
}