Three-way fluid layout with twitter bootstrap - clearfixes messing things up

Question

I am trying to create a three-column layout with a fluid center and fixed sides. Here's the jsfiddle . Clearfix for the navigator seems to push the main content below the sidebars. Without clearfixes, the content as a whole begins to display incorrectly. Does anyone know how to fix this?

Answer 1

Define your .nav-tabs div as inline-block to properly contain it within its borders:

 .nav-tabs { display: inline-block; width:100%; } 

demo: http://jsfiddle.net/6vPqA/15/show/ edit: http://jsfiddle.net/6vPqA/15/

edit: added width to make the menu more adaptable.

Answer 2

Setting the height for the nav class seems to increase the content between the sidebars.

Sort of:

 .nav {height:50px}