title: Good CSS for flashes (aka info messages in Rails, growls in OSX)
body: <p>I'm having difficulty getting CSS to work like I want it to for flashes (those little messages that show when you log in or do something or whatnot to confirm your action, eg in Rails).</p>
  
  <p>I want it to:</p>
  
  <ul>
  <li>live within any arbitrary div</li>
  <li>look like a centered box with text in it</li>
  <li>be only as big as needed to fit the text (if less than specified max width) or wrap the text (if larger) </li>
  <li>have centered or left-aligned (or combination) text, depending on the flash (e.g. short errors are centered; longer how-to newbie intros are left-aligned); an extra CSS class (e.g. 'flash info left') to support this is OK</li>
  <li>play well with having multiple flashes on a page right next to each other (as in example)</li>
  <li>preferably consist of a single element w/ a class around the text, rather than text within an element within a wrapper element</li>
  <li>preferably be YUI CSS compatible and pure CSS (not JS)</li>
  <li>work right on IE7+, FFx 3+, Safari 3+; work 'good enough' on older browsers</li>
  </ul>
  
  <p>Most of the CSS I've seen for this doesn't do one of those - e.g. most specify a fixed width, which means that either it gets wrapped poorly or it's got way too much padding.</p>
  
  <p>How can I do this? (Or: Why can't I?)</p>
  
  <p>Here's my current CSS:</p>
  
  <pre><code>&lt;div class="flash info"&gt;
    &lt;span class="close"&gt;&lt;a href="AJAX callback"&gt;X&lt;/a&gt;&lt;/span&gt;
    Some informational text here that can be closed w/ the X
  &lt;/div&gt;
  &lt;div class="flash error"&gt;
    Some other simultaneous error
  &lt;/div&gt;
  
  .flash {
      text-align: center;
      padding:    .3em .4em;
      margin:     0 auto .5em;
      clear:      both;
      max-width:  46.923em; /* 610/13 */  
      *max-width: 45.750em; /* 610/13.3333 - for IE */
  }
  
  .flash.error {
      border: thin solid #8b0000;
      background: #ffc0cb;
  }
  
  .flash.notice, .flash.info {
      border: thin solid #ff0;
      background: #ffe;
  }
  
  .flash.warning {
      border: thin solid #b8860b;
      background: #ff0;
  }
  
  .flash .close {
      float:  right;
  }
  
  .flash .close a {
      color:              #f00;
      text-decoration:    none;
  }
  </code></pre>
  
  <p>Bonus points: I achieved what I want only partially with the tooltip code below; namely, it isn't capable of wrapping.</p>
  
  <p>For some reason, unless nowrap or a width is specified, it defaults to being very small in width. I couldn't figure out why, or how to make it just wrap at a specific, wider width (like I want to happen w/ the flash).</p>
  
  <pre><code>Some text with &lt;span class="tooltip"&gt;info &lt;span&gt;i can has info?&lt;/span&gt;&lt;/span&gt; about a word
  
  .tooltip {
    position: relative; /*this is the key*/
      background-color: #ffa;
  }
  
  .tooltip:hover{
      background-color: #ff6;
  }
  
  .tooltip span {
      display: none
  }
  
  .tooltip:hover span { /*the span will display just on :hover state*/
      z-index:        1; 
      display:        block;
      position:       absolute;
      top:            1.6em; 
      left:           0;
      border:         thin solid #ff0;
      background:     #ffe;
      padding:        .3em .6em;
      text-align:     left;
      white-space:    nowrap;
  }
  </code></pre>
  
  <p>Thanks!</p>
  
  <ul>
  <li>Sai</li>
  </ul>