Here is a solution using CSS display properties like table and table-cell.
To achieve this layout, you can wrap your left and right child elements in a .content div.
The HTML:
<div class="second_bar">
<div class="status_border left">
<div class="content"></div>
</div>
<div class="nav_bar"></div>
<div class="status_border right">
<div class="content"></div>
</div>
</div>
and the CSS:
.second_bar {
height:80px;
width:100%;
border: 1px dotted blue;
display: table;
}
.status_border {
display: table-cell;
vertical-align: top;
width: auto;
background-color: yellow;
}
.status_border .content {
width: auto;
height: 14px;
background-color: pink;
}
.nav_bar {
display: table-cell;
vertical-align: top;
height: 80px;
width: 980px;
min-width: 980px;
background-color: green;
}
In the container block .second_bar, set the display property to table and the width to 100%.
The child elements .status_border and .nav_bar have display: table-cell and vertical-align: top, which can be adjusted based on layout needs.
The .nav_bar has a specific width of 980px but will shrink if necessary due to being a table cell. To maintain full width, set min-width to the same value.
For the left and right status bars to be 14px high, use separate block elements for each side.
The three table-cell blocks will take the height of the tallest cell - in this case, the 80px .nav_bar div.
If .content's width is set to auto, it will adjust to match its siblings and fill available space.
Keep in mind that IE8 does not support table-cell, otherwise, this pattern is quite handy.
View the demo fiddle at: http://jsfiddle.net/audetwebdesign/SyAAQ/