Bootstrap 3 floating right preventing stacking - html

Question

I'm starting to use Bootstrap 3 and it seems like you use it to define and over all structure but there are probably going to be a lot of containers that get your own custom classes?
I have a container which I've changed the definition of to be fluid so it's now:
.fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
min-width:500px;
}
but when it comes to the rows and sizing them I'm running into some problems here and I'm not sure if it's solved with my own custom classes or leveraging bootstrap in a way I don't know about.
The .fluid-container is going to be a header in this case and inside of it I have a container I'd like to be on the left, and then another container that will be on the right. Normally I'd just make two containers, float one left, the other right and then put a min width on the parent container.
In bootstrap what I've done is this (fiddle here http://jsfiddle.net/hg84F/2/):
<div class="lp">
<div class="lp-shell-head lp-fluid-container" style="border:1px solid red;">
<div class="row">
<div class="col-sm-2" style="border:1px solid blue;">left</div>
<div class="col-sm-2 col-sm-offset-8" style="border:1px solid green;">right</div>
</div>
</div>
</div>
The problem with this is when I make the page width smaller the two containers eventually become full width and stack on top of each other. What I want to have happen is have them stay on their respective sides no matter what and I wasn't sure how to make them do this. Any ideas of how to use bootstrap in this way?

Answer 1

What I want to have happen is have them stay on their respective sides no matter what and I wasn't sure how to make them do this. Any ideas of how to use bootstrap in this way?
http://getbootstrap.com/css/#grid -- More on Bootstrap grid.
<div class="row">
<div class="col-xs-2" style="border:1px solid blue;">left</div>
<div class="col-xs-2 col-xs-offset-8" style="border:1px solid green;">right</div>
</div>
All you're missing, based on your question is the Extra Small (always responsive) column class, which is col-xs-*

Answer 2

So this is a slightly different approach to your question. Based on your questions and comments to JonathanR's answer, I figured you need a little tweak.
Jonathan's solution is valid, but I'm really unsure of how far you want to "squeeze" the page before the "left" and "right" actually touch. Bootstrap uses percentage based widths and margins for the "col-" and "offset-" elements. If you attempt to squeeze it past a certain point, you will begin to see the horizontal scroll. This example solves that issue in a different manner.
Here's my working example: http://bootply.com/101136
<!-- 'Container-fluid' class no longer exists in 3.0, but I use it as a semantic wrapper class -->
<div class="container-fluid">
<!-- Make sure you use include the bootstap 'container' class -->
<div class="lp-shell-head lp-fluid-container container" style="border:1px solid red;">
<div class="row">
<!-- Use one XS col instead of 2 col-xs-2 and the offset -->
<div class="col-xs-12">
<!-- Use two div elements and float them left/right -->
<div class="pull-left" style="border:1px solid blue;">left</div>
<div class="pull-right" style="border:1px solid green;">right</div>
</div>
</div>
</div>
</div>
Minor change in the CSS. Switched your "min-width" to "max-width" in order to prevent your row from expanding past the 500px threshold.
.container-fluid {
border:1px solid purple;
}
.lp-fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
/* Switched to 'max-width' */
max-width:500px;
}