Encountering a challenging issue where alert messages need to be displayed on the page just below the navigation and above the content. The problem is demonstrated in this fiddle http://jsfiddle.net/53b6g/1/. It's tricky because the style used can't account for varying numbers of alerts, making it difficult to determine the height of the wrapper element.
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 the same width as below
</div>
</div>
<div class="tr">
<div class="td">
shorter but same width
</div>
</div>
<div class="tr">
<div class="td">
however, there could be 3, 2, or 1 alert so height calculations are unreliable
</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;
}
A separate fiddle demonstrates the issue without using the commented code here http://jsfiddle.net/8Awze/. The challenge remains whether this can be resolved solely with 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;
}