div che sborda dal div contenitore solo in firefox

[eloderma]

ho provato a cercare ma non ho trovato nulla ma penso sia una cosa banale.

la situazione è questa:

#content{
        margin-left: 30px;
        background-color: #e7e8ea;
        width: 720px;
        height:auto !important;
        margin:auto;
        padding: 15px 10px 30px 30px;
}
#content1{
        float: right;
        background-color: #FFFFFF;
        width: 350px;
        padding-left: 5px;
        padding-right: 5px;
        height:auto !important;
}
#gallery{
        float: left;
        background-color: #FFFFFF;
        width: 360px;
        height:auto !important;
}

<div id="content">
  <div id="gallery">
 ciao gallery
  </div>
  <div id="content1">
   ciao1 
   ciao1 
   ciao1 
   ciao1 
   ciao1 
   ciao1 
   ciao1 
 ciao1 
  ciao1 
  ciao1 
  ciao1 
  ciao1 
  
  </div>
  </div>
  <div id="content2">
   ciao2
  </div> 

in questo caso succede che il div content1 si allunga e sborda dal div content mentre
vorrei che l'altezza di content si adattasse a quelle di gallery o content1 ma ciò non accade in firefox mentre funzia in explorer, come posso risolvere?

putroppo non mosso mettere una altezza minima o fissa perchè i contenuti sono estremamente variabili

grazie.