CSS navbar issues - css

Question

I have a header with logo on the left and links on the right.
On smaller screens (such as a tablet) links doesn't fit in one line.
When using float:left for the logo, and float:right for the links, all the links fall to a new line, which is not the desired behaviour.
When using display: table-cell for both divs, the link area background-color spreads beyond the link area, which is not the desired behaviour too.
I'm stucked on what css formula is the better solution.
I need to keep all the links on the right of the logo, but the background-color should not spread beyond the link area.
Here is a fiddle with 2 examples, one with a lot of links (2 lines) and one with less links (1 line):
http://jsfiddle.net/ARauS/
#header {
display: table;
height: 25px;
background-color: #e7e7e7;
width: 100%;
}
#header #logo {
#float:left;
display: table-cell;
}
#header #links {
#float:right;
background-color: silver;
text-align: right;
display: table-cell;
font-size: 0; /* remove whitespace between menu itens*/
}
#header #links a {
font-family: Arial, sans-serif;
font-size: 8pt;
line-height: 18pt;
text-decoration: none;
color: #6a6a6a;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
margin-left: 1px;
white-space: nowrap;
}
#header #links a:hover {
text-decoration: underline;
}
#header #links a.personal {
background-image: linear-gradient(to bottom, #fcfcfc, #e7e7e7);
}