HTML/CSS: 3 columns, variable sides and fixed centered middle column

Question

My problem is with the header. So I basically have 3 columns of divs. I want the middle one to have a constant width of 980px, and then I want the left of the header to extend to the end of the browser window with a blue background color. As for the right of the header, I want that to extend to the end of right side of the browser with a black background color. It kind off looks like this:

<------------------------------[blue][center header][black]---------------------------->

I've done my research and all I could find so far are two columns with a fixed left column with the right column filling up the rest of the space. I wonder how this can be applied to my problem?

Would it be like:

<div style="width:100%;">
     <div style="display:table-cell; background-color:blue;"></div>
     <div style="width: 980px;">my header</div>
     <div style="display:table-cell; background-color:black;"></div>
</div>

Thank you!

Answer 1

A simple solution - basicaly using your exact stying, but putting another block in the central table-cell element, something like this span here:

<div class="wrapper">
   <div class="left"></div>
   <div class="center"><span>my header</span></div>
   <div class="right"></div>
</div>

I moved all the inline style to a separate CSS block and used class selectors:

.wrapper {
    display:table;
    width:100%;
}
.left {
    display:table-cell;
    width:50%;
    background-color:blue;
}
.right {
    display:table-cell;
    width:50%;
    background-color:black;
}
.center {
    display:table-cell;
}
.center span {
    display:inline-block;
    width:900px;
}

here is a jsfiddle

and here I made the center much narrower for a better illustration: jsfiddle

Hope this helps =)