Fixed Header With Horizontal Scrolling Content

What I would like to achieve is the following: A page header with navigation bar with a fixed height in pixels and stretching the width of the viewport. The page content in column

Solution 1:

Add position: fixed; with right: 0; and left: 0;. Because you're fixing #navigation, you'll need to make sure you add top margining to your #content div.

#navigation {    
    height: 128px;
    display:    table-row;
    background: #333;   
    position: fixed;
    right: 0;
    left: 0;
}

I've revised your fiddle with the suggested changes here http://jsfiddle.net/e11hLtby/1/