Fill the horizontal space between left and right floated elements - css

Question

I found an answer here that addresses what I need to do, but it doesn't seem to work perfectly for me. I have sidebar divs floated left and right. I want to stick a div in the middle and fill the space. The technique in that answer works for the left div, but it pushes the right div down to the next line. I threw up a quick demo on CodePen to show the problem.
Can anyone suggest a way to fix this so that all the divs are on the same line?
Update: I realize I could do this easily using percentages for all the div widths, but I really need to maintain static widths for the sidebars.

Answer 1

One way to do this would be changing the order of your HTML (placing the right sidebar before the left)
<div class="page-grid">
<div class="sidebar right">
<div>Right Widget 1</div>
<div>Right Widget 2</div>
</div>
<div class="sidebar left">
<div>Widget 1</div>
<div>Widget 2</div>
</div>
<div id="content">Content area</div>
</div>
http://codepen.io/anon/pen/kHmjd

Answer 2

This is using an example from Dynamic Drive's CSS Layouts
I like this one, especially because it preserves the order of the content semantically. Main content is delivered first, followed by both side columns.
HTML
<div class="page-grid">
<div id="contentwrapper">
<div id="content">Content area</div>
</div>
<div class="sidebar left">
<div>Widget 1</div>
<div>Widget 2</div>
</div>
<div class="sidebar right">
<div>Right Widget 1</div>
<div>Right Widget 2</div>
</div>
</div>
CSS
#contentwrapper {
float: left;
width: 100%;
}
#content {
margin: 0 15em;
}
.sidebar {
float: left;
width: 15em;
}
.sidebar.left {
margin-left: -100%;
}
.sidebar.right {
margin-left: -15em;
}