Positioning of block partially influences other block - html

Question

I have created a minimal example that represents a simple tabbing system, with tabs on the left and content on the right.
In my example, the bottom position of the tabs influences the positioning of content on the right. This only happens when I clear positioning inside the content block.
This is the minimal example's HTML, including a self-explanatory description in the content block. So what goes wrong is that the line below the clearfix is wrongly positioned. In fact, it's positioned under the left tabs' bottom.
* {
box-sizing: border-box;
}
.clearfix {
clear: both;
}
.nav-tabs {
float: left;
display: block;
list-style: none;
padding-left: 0;
margin: 0 auto 0 0;
width: 20%;
}
.nav-tabs > li {
position: relative;
display: block;
float: none;
}
.nav-tabs > li > a {
position: relative;
display: block;
padding: 10px 15px;
border: 1px solid transparent;
}
.nav-tabs > li.active > a {
border-color: blue transparent blue blue;
}
.tab-content > .tab-pane {
display: none;
}
.tab-content > .tab-pane.active {
display: block;
}
.tab-body {
position: relative;
border: 1px solid red;
padding: 20px;
width: 80%;
margin-left: 20%;
}
<ul class="nav-tabs">
<li><a>foo</a></li>
<li class="active"><a>bar</a></li>
<li><a>baz</a></li>
<li><a>boo</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane">
<div class="tab-body">
<h1>Foo content</h1>
</div>
</div>
<div class="tab-pane active">
<div class="tab-body">
<div style="float:right">
floating right
</div>
<h1>Bar content</h1>
<div class="clearfix"></div>
<p>
This line is wrongly positioned to the bottom of the tabs left, why? And how can it can corrected?
</p>
</div>
</div>
</div>
I don't know exactly what goes wrong, and therefore how to fix it... To make editing / fixing / trying all a bit easier, here's the JSFiddle.

Answer 1

try this
HTML
<ul class="nav-tabs">
<li><a>foo</a></li>
<li class="active"><a>bar</a></li>
<li><a>baz</a></li>
<li><a>boo</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane">
<div class="tab-body">
<h1>Foo content</h1>
</div>
</div>
<div class="tab-pane active">
<div class="tab-body">
<div class="pull-right">
clearfix
</div>
<h1>Bar content</h1>
<p>
This line is wrongly positioned to the bottom of the tabs left, why? And how can it can corrected?
</p>
</div>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
.clearfix {
clear: both;
}
.nav-tabs {
float: left;
display: block;
list-style: none;
padding-left: 0;
margin: 0 auto 0 0;
width: 20%;
}
.nav-tabs > li {
position: relative;
display: block;
float: none;
}
.nav-tabs > li > a {
position: relative;
display: block;
padding: 10px 15px;
border: 1px solid transparent;
}
.nav-tabs > li.active > a {
border-color: blue transparent blue blue;
}
.tab-content > .tab-pane {
display: none;
}
.tab-content > .tab-pane.active {
display: block;
}
.tab-body {
position: relative;
border: 1px solid red;
padding: 20px;
width: 80%;
margin-left: 20%;
}
.pull-right{
float:right;
}
demo