center element with unknown height without having it take up space - html

Question

This is a tricky problem from what I can see. Basically, I have alert messages that need appear on the page just below the navigation and on top of the content below. This is best shown in a fiddle here http://jsfiddle.net/53b6g/1/ - notice the commented style - this style can't be used b/c I don't know how many alerts will be on the page. So the height of the wrapper element is unknown.
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;
}
Here is a fiddle without the commented code showing the problem at hand http://jsfiddle.net/8Awze/. Is this something that can be solved with CSS alone?
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;
}

Answer 1

If I'm understanding you correctly, you should be able to use position: absolute as follows:
.wrapper{
position: absolute;
width: 100%;
top: 25px;
}
http://jsfiddle.net/53b6g/2/