Using CSS, trying to center and align multiple tables side by side

Question

I have a header bar in which I'm trying to create 3 sections: Left, Center, Right.

All content has to center vertically and be backwards compatible with IE7, that's why I'm using tables, unless you have an easier solution.

As you can see right now, the center content tables are stacking. How can I style it so that the tables are aligned side-by-side?

DEMO: http://jsfiddle.net/drvn9x26/35/

UPDATE: I tried one suggestion. The tables are side-by-side now, but you'll notice it's still not quite right when 1 of the tables is highlighted, the formatting is off. I also need the highlighted blue content to fill the container exactly.

UPDATE2: Ok, I just realized part of the problem. My browser is zoomed in 125%...there isn't actually a 1 pixel space between the container and the bottom when I zoom out.

UPDATE3: Paul provided a solution that works for me. I appreciate all the suggestions.

.container{
    white-space: nowrap;
    background-color: red;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    float: none;
    position: fixed;
}
table {
    height: 50px;
    border-spacing: 0px;
}
td {
    padding: 0px;
}

.cell-left {
    float:left;
}
.cell-selected {
    background-color:blue;
    color:white;
}
.cell-right {
    position:absolute; 
    top:0px; 
    right:0px;
}

<div class='container'>
    <div class='cell-left'>
        <table class='cell cell-selected'><tr><td>
            LEFT
        </td></tr></table>
    </div>
<center>
<table class='cell'><tr>
<td><table class='cell cell-selected'><tr><td>CENTER1</td></tr></table></td>
<td><table class='cell'><tr><td>CENTER2</td></tr></table></td>
<td><table class='cell'><tr><td>CENTER3</td></tr></table></td>
</tr></table> 
</center>
    <div class='cell-right'>
        <table class='cell'><tr><td>
            RIGHT
        </td></tr></table>
    </div>
</div>

Answer 1

Instead of three tables inside center section use use td tags.

<table class='cell'>
  <tr>
    <td>CENTER1</td>
    <td>CENTER2</td>
    <td>CENTER3</td>
  </tr>
</table>  

[EDIT] version with only one table http://jsfiddle.net/drvn9x26/33/

Answer 2

The floating divs for the center table are missing, shouldn't it be:

<div  class='cell-left'><table class='cell'><tr><td>
        CENTER1
    </td></tr></table></div>
    <table class='cell'><tr><td>
        CENTER2
    </td></tr></table>
    <div  class='cell-right'><table class='cell'><tr><td>
        CENTER3
    </td></tr></table></div>

But regardless of that, why not use one table for each level of structure instead of tables for each element.

See DEMO 1 for stacked tables.

See DEMO 2 for nested tables.

See DEMO 3 for nested tables with highlight features (try hover!).

See DEMO 4 for equal heights of all cells.

See DEMO 5 for adjusted widths of far left and far right cell and center cells spanning everything in between.

See DEMO 6 for adjusted widths of far left and far right cell and center cells are as small as possible.

Answer 3

Possible solution without table and with a little bit of JS to set the same height on each column. The .before and <span class="before"></span> are here as a substitute of the :before (because it doesn't work on IE7)

http://jsfiddle.net/OxyDesign/p3tv9n5m/

HTML

<div class='container'>
    <div class='cell cell-left'>
        <span class="before"></span><span class="cell-content">content</span>
    </div>
    <div class='cell cell-center'>
        <span class="before"></span><span class="cell-content">content<br />content<br />content</span>
    </div>
    <div class='cell cell-right'>
        <span class="before"></span><span class="cell-content">content</span>
    </div>
</div>

CSS

.container {
    position:relative;
}
.cell{
    width:33.3333333333333%;
    float:left;
}
.cell .before {
    width:0;
    height:100%;
    display:inline-block;
    vertical-align:middle;
}
.cell-content {
    display:inline-block;
    vertical-align:middle;
}
.cell-left{
    text-align:left;
    background:#ccc;
}
.cell-center{
    text-align:center;
    background:#ddd;
}
.cell-right{
    text-align:right;
    background:#ccc;
}

JS

$(document).ready(function(){
    var cells = $('.cell'),
        cellsLgth = cells.length,
        maxHeight = 0;

    for(var i = 0; i < cellsLgth; i++){
        var height = cells.eq(i).height();
        if(height > maxHeight)  maxHeight = height;
    }
    cells.css('height',maxHeight);
});

Answer 4

.container{
white-space: nowrap;
background-color: red;
top: 0px;
left: 0px;
width: 100%;
position: fixed;
text-align:center;
}
table {
width:100%;
border-spacing: 0px;
}

table td {
width:33.3333%;
height:50px;
line-height:50px;
}


<div class='container'>

<table>
    <tr>
        <td>LEFT</td> 
        <td>CENTER</td>
        <td>RIGHT</td>
    </tr>
</table>

</div>

http://jsfiddle.net/drvn9x26/39/