Bootstrap nav nav-tab classes not displaying correctly when next to elements that use float left

Question

I seem to be having an issue using the .nav and .nav-tab classes when placed next to elements that are using the property float:left see the JSFiddle It looks to me like it's do with the clearfix in .nav::after but when I modify the css to remove clear:both the nav-tab gets all messed up.

Basically what I'm trying to do is create two static columns and then a third dynamic column that fills the rest of the page which seemed fine until I started using the tabs where the div containing the tab-content falls below the first and second columns instead of being to the right of them under the tabs where it's meant to be.

Here's the html and css:

html:

<div class="col1">
    <section class="s1">
        Section 1
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
</section>
<section class="s2">
    Section 2 
    <ul>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
    </ul>
</section>
</div>
<section class="s3">
    Section 3    
    <ul class="nav nav-tabs">
         <li><a href="#a" data-toggle="tab">a</a></li>
         <li><a href="#b" data-toggle="tab">b</a></li>
         <li><a href="#c" data-toggle="tab">c</a></li>
         <li><a href="#d" data-toggle="tab">d</a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane active" id="a">A</div>
        <div class="tab-pane" id="b">B</div>
        <div class="tab-pane" id="c">C</div>
        <div class="tab-pane" id="d">D</div>
    </div>
</section>

css:

.s1{
    float:left;
    width: 60px;
    background-color: grey;
}
.s2{
    float:left;
    width: 60px;
    background-color: pink;
}
.s3{
    background-color: yellow;
    width: 100%;
}

.s3 > .tab-content{
        background-color: orange;
}

Answer 1

OK here is the edited answer Basically you need to make sure that the widths of the divs are properly defined if you are using float;

.col1{
    width:100%;
}
.s1{
    float:left;
    width: 10%;
    background-color: grey;
}
.s2{
    float:left;
    width: 10%;
    background-color: pink;
}
.s3{

background-color: yellow;
float:left;
width:80%;    

}

here is the updated jsfiddle !

Answer 2

Here is an updated JSFiddle with the working answer.

The reason it wasn't displaying correctly was because the clear:both is in the .clearfix mixin which is used in the .nav class. This pulls any elements below other elements that are floated left or right.

The fix for this is to modify the after where any .clearfix has been implemented. In the case of the JSFiddle above I added the following css:

.nav::after{
   clear:none;
   height:41px;
}

Additional: You will notice that I have had to specify the height of the after now so that it displays correctly. Where this solution falls down is that now anywhere an element uses clearfix you will need to manually handle the height.