CSS Help - Float Right ignoring margin

Question

У меня есть две кнопки внутри формы, и я хочу поместить ее влево (предыдущую), а другую вправо (далее/отправить). Проблема в том, что когда у меня есть предыдущая кнопка, скрытая (что я делаю, когда на первой вкладке формы), кнопка next/submit находится за пределами содержимого. Как получить кнопки, расположенные так, как я хочу, когда предыдущая кнопка скрыта?

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> 

Я использую JQuery .Show и .hide на рецепт дивы и кнопки по мере необходимости. Когда я нахожусь на recipeform1 предыдущая кнопка отсутствует, и форма выглядит следующим образом:

Я хочу, чтобы выглядеть следующим образом (минус предыдущий появляясь):

Answer 1

Используйте clearfix решение ...

#buttons { 
    overflow: hidden; 
} 

Это происходит потому, что вы плавали следующий окурок справа, так что, когда , предшествующий, скрыт, его родительский элемент сбрасывается (элементы не расширяются, чтобы содержать поплавковые элементы по умолчанию).