Хороший CSS для вспышек (также как информационные сообщения в Rails, рычит в OSX)

Мне сложно заставить CSS работать, как будто я хочу, чтобы он показывался на вспышки (те небольшие сообщения, которые показываются при входе в систему или что-то делать или что-то еще, чтобы подтвердить действие, например, в Rails).

Я хочу, чтобы он:

• жить в любом произвольном div
• выглядят как центрированные поля с текстом в нем
• быть настолько большим, насколько это необходимо, чтобы соответствовать тексту (если оно меньше заданной максимальной ширины) или обернуть текст (если больше)
• имеют центрированный или выровненный по левому краю (или комбинированный) текст, в зависимости от вспышки (например, короткие ошибки центрированы, более длинные вступительные вхождения новичков выравниваются по левому краю); дополнительный CSS-класс (например, "flash info left" ), чтобы поддерживать это в порядке.
• хорошо играть с несколькими вспышками на странице рядом друг с другом (как в примере)
• предпочтительно состоят из одного элемента w/class вокруг текста, а не текста внутри элемента внутри элемента оболочки
• желательно быть совместимым с YUI CSS и чистым CSS (не JS)
• работает прямо на IE7 +, FFx 3+, Safari 3+; работа "достаточно хороша" в старых браузерах.

Большая часть CSS, которую я видел для этого, не делает ни одного из них - например. в большинстве случаев указывается фиксированная ширина, что означает, что либо он плохо упакован, либо слишком сильно заполнен.

Как я могу это сделать? (Или: Почему я не могу?)

Здесь мой текущий CSS:

<div class="flash info">
  <span class="close"><a href="AJAX callback">X</a></span>
  Some informational text here that can be closed w/ the X
</div>
<div class="flash error">
  Some other simultaneous error
</div>

.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;
}

Бонусные очки: я достиг только того, что хочу только частично с помощью кода подсказки ниже; а именно, он не способен обертывать.

По какой-либо причине, если не указано значение nowrap или width, значение по умолчанию имеет очень малую ширину. Я не мог понять, почему, или как сделать его просто обертыванием на определенной, более широкой ширине (например, я хочу произойти с флэш-памятью).

Some text with <span class="tooltip">info <span>i can has info?</span></span> 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;
}

Спасибо!

• Sai