центральный элемент с неизвестной высотой, не занимая место

Это сложная проблема из того, что я вижу. В принципе, у меня есть предупреждающие сообщения, которые должны появляться на странице чуть ниже навигации и поверх содержания ниже. Это лучше всего видно на скрипке здесь http://jsfiddle.net/53b6g/1/ - обратите внимание на стиль комментариев - этот стиль нельзя использовать b/c. Я не знаю, сколько оповещений будет на странице. Таким образом, высота элемента wrapper неизвестна.

HTML:

<div class="nav">
    <ul>
        <li>first</li>
        <li>second</li>
        <li>last</li>
    </ul>
</div>

<div class="wrapper">
    <div class="table">
        <div class="tr">
            <div class="td">
                Let us center this and have same width as below
            </div>
        </div>
        <div class="tr">
            <div class="td">
                shorter but same width 
            </div>
        </div>
        <div class="tr">
            <div class="td">
                but wait - there could be 3 or 2 or 1 so can't use height calculations
            </div>
        </div>
    </div>
</div>

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in dui rhoncus, porttitor nibh ornare, tristique est. Nullam condimentum quam ac metus varius, at fermentum nibh congue. Fusce vel posuere justo, vel vulputate enim. Cras varius libero et felis venenatis ultricies. Vivamus ante est, tempus et aliquet eget, varius id nisi. In a consectetur lacus, vitae lacinia mauris. Nulla pulvinar tellus id laoreet tempus. Integer feugiat quis odio eget ullamcorper.</p>
</div>

CSS:

/*can't use style*/
.wrapper{
    position: relative;
    top: -4px;
    margin-bottom: -70px;
}
/*end can't use style*/


.table{
    display: table;
    margin: 0 auto;
}

.tr{
    display: table-row
}

.td{
    display: table-cell;
    background: red;
}

.nav{
    background: green;
}

.nav ul {
    margin: 0;
}

.nav li{
    display: inline-block;
}

.content{
    background: blue;
}

Вот скрипка без прокомментированного кода, показывающая проблему под рукой http://jsfiddle.net/8Awze/. Это что-то, что можно решить с помощью CSS?

HTML:

<div class="nav">
    <ul>
        <li>first</li>
        <li>second</li>
        <li>last</li>
    </ul>
</div>

<div class="wrapper">
    <div class="table">
        <div class="tr">
            <div class="td">
                Let us center this and have same width as below
            </div>
        </div>
        <div class="tr">
            <div class="td">
                shorter but same width 
            </div>
        </div>
    </div>
</div>

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in dui rhoncus, porttitor nibh ornare, tristique est. Nullam condimentum quam ac metus varius, at fermentum nibh congue. Fusce vel posuere justo, vel vulputate enim. Cras varius libero et felis venenatis ultricies. Vivamus ante est, tempus et aliquet eget, varius id nisi. In a consectetur lacus, vitae lacinia mauris. Nulla pulvinar tellus id laoreet tempus. Integer feugiat quis odio eget ullamcorper.</p>
</div>

CSS:

.table{
    display: table;
    margin: 0 auto;
}

.tr{
    display: table-row
}

.td{
    display: table-cell;
    background: red;
}

.nav{
    background: green;
}

.nav ul {
    margin: 0;
}

.nav li{
    display: inline-block;
}

.content{
    background: blue;
}