CSS Help - Float Right ignoring margin

Question

I have two buttons inside of a form and I want to position one to the left (previous) and the other to the right (next/submit). The problem is when I have the previous button hidden (which I do when on the first tab of the form) the next/submit button hovers outside of the content. How do I get the buttons positioned the way I want when the previous button is hidden?

ASP.NET:

  <div id="formContainer" style="padding:20px; margin-top:50px; margin-bottom:20px; width:600px; margin-left:auto; margin-right:auto; border:solid black 1px;background-color:#c6c6c6">
        <div id="recipeForm1">
              <!-- OMMITTED FOR Length Purposes -->
        </div>
        <div id="recipeForm2">
             <!-- OMMITTED FOR Length Purposes -->
            </table>
        </div>
        <div id="recipeForm3">
            directions
        </div>
        <div id="recipeForm4">
            Nutrition
        </div>

        <div id="recipeForm5">
            review
        </div>
        <div id="buttons"style="margin-left:auto; margin-right:auto; padding-top:30px;">
            <input id="btnPrevious" type="button" value="Previous" /> 
            <input id="btnNext" type="button" value="Next" style=" float:right;" />
        </div>

    </div>

I use jquery .show and .hide on the recipe divs and buttons as needed. When I am on recipeform1 the previous button is missing and the form looks like:

I want it to look like this (minus previous appearing):

Answer 1

Use a clearfix solution...

#buttons {
     overflow: hidden;
}

This happens because you have floated the next button to the right, so when the previous is hidden, its parent element collapses (elements do not expand to contain floated elements by default).