Float forms inside a well - forms

Question

I want to put 2 forms in a well one next to other. I use twitter-boostrap.
This is my code
<div class="well">
<h3>
Title
</h3>
<form method="post" class="form-horizontal">
<div class="control-group">
<label class="control-label" for="select01">Label1: </label>
<select class="input-mini" id="select01">
(my options)
</select>
</div>
<div class="control-group">
<label class="control-label" for="input01">Label2: </label>
<input class="input-mini" id="input01">
</div>
<div class="control-group">
<label class="control-label" for="select02">Label3: </label>
<select class="input-mini" id="select02">
(myoptions)
</select>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
<form method="post" class="form-horizontal">
<div class="control-group">
<label class="control-label" for="input02">Label3: </label>
<input class="input-mini" id="input02">
</div>
<div class="control-group">
<label class="control-label" for="input03">Label4: </label>
<input class="input-mini" id="input03">
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
If I include the forms in divs and add a style with float:left, then my well brake and put my forms out of it. I tried span, divs, form inside a form, but I cannot find a way to put one form next to other without break the well.

Answer 1

Try wrapping your forms in a div to isolate that content from the well:
http://jsfiddle.net/SAdM8/6
<div class="well">
<div style="overflow: hidden;">
... forms ...
</div>
</div>
Like Billy Moat said, you could simply add the overflow property to the well. I prefer to keep Bootstrap elements in their natural state to avoid inadvertent breakage. Either works.