Is there a way to make the side divs extend to cover the entire page width?
http://jsfiddle.net/p94vxnp2/1/
<style>
#page_body_table {
display: table;
width: 100%;
vertical-align: center;
}
#page_body_left {
display: table-cell;
max-width: 100%;
border: 1px solid black;
}
#page_body_middle {
display: table-cell;
max-width: 1024px;
border: 1px solid black;
}
#page_body_right {
display: table-cell;
max-width: 100%;
border: 1px solid black;
}
@media screen and (max-width: 675px) {
#page_body_left, #page_body_right {
display: none;
}
}
</style>
<center>
<div id="page_body_left">
left
</div>
<div id="page_body_middle">
this is content of page
</div>
<div id="page_body_right">
right
</div>
</center>