Weird <section> Behaviour in Twitter Bootstrap - html

Question

I have been working with the Twitter Bootstrap on a mini project. I am using 's with it and there is a bit of weird behaviour. I have jQuery which allows me to create new tabs when a button is clicked. The new tab is made active and contains a form. This form displaces the title of the below and I can't find out why. Can anyone help?
Code Snippets:
<section id="builder">
<div class="page-header">
<h1>App Builder. <small>Create your app.</small></h1>
</div>
<div class="span7">
<!-- ===== App Title ===== -->
<div class="control-group">
<label class="control-label" for="appTitle">App Title</label>
<div class="controls">
<input type="text" class="input-xlarge" id="appTitle">
<p class="help-block">Enter the title for your app. It will appear at the top of your app.</p>
</div>
</div>
<!-- ===== App Subtitle ===== -->
<div class="control-group">
<label class="control-label" for="appSubtitle">App Subtitle</label>
<div class="controls">
<input type="text" class="input-xlarge" id="appSubtitle">
<p class="help-block">Enter the subtitle for your app. It will appear below the title.</p>
</div>
</div>
<!-- ===== App Theme ===== -->
<div class="control-group">
<label class="control-label" for="appTheme">App Theme</label>
<div class="controls">
<select id="appTheme">
<option>Dark</option>
<option>Light</option>
</select>
<p class="help-block">Select the theme for your app. You can preview your theme on the right.</p>
</div>
</div>
<!-- ===== App Pages ===== -->
<p>App Pages</p>
<ul class="nav nav-tabs" id="tabHeaders">
<li><i class="icon-plus"></i>Add Page</li>
<!-- Tabs (Created by Javascript) -->
</ul>
<div class="tab-content" id="tabContent">
<!-- Tab Content (Created by Javascript) -->
</div>
</div>
<div class="span4">
<div class="iphonebackground">
<div class="screenbackground"></div>
</div>
</div>
</section>
<section id="preview">
<div class="page-header">
<h1>Preview your App. <small>See your app in it's full glory before you download it.</small></h1>
</div>
</section>
Before adding a new tab:
After adding a new tab:

Answer 1

It looks like the text is being floated around the new tab. Try using clear:left; in the CSS for that text to see if it correctly drops back below the tab.