Come posizionare due box in un container? (a sinistra e a destra del contenitore)

[AndreaNobili]

Ciao a tutti,
è un po' di tempo che non metto mano ad HTML e CSS ed ho qualche stupidissimo dubbio su di un argomento che in teoria dovrebbe essere piuttosto semplice.

Vi spiego meglio con questo esempio pratico: http://onofri.org/example/Typo3Test/mycontent/

Come potete vedere vi è una colonna centrale che contiene dei box creati mediante dei div su cui sono state settate delle impostazioni mediante l'uso dei CSS (dimensioni, colori, float, ombre, etc)

I miei dubbi sono proprio relativi all'uso dei float che non sò se è corretto.

Il codice HTML di tale sezione centrale è il seguente:

      <div id="container">
        <div id="header2">
            

TITLE</p>
         </div>
        
          <div id="first">
            

BLA BLA BLA</p>
            

BLA BLA BLA</p>
            

BLA BLA BLA</p>
          </div>
          
          <div id="second">
            

BLA BLA BLA</p>
            

BLA BLA BLA</p>
            

BLA BLA BLA</p>
          </div>
          
        </div>
          
</div>

Mentre il codice CSS è questo quì:

#header2{
  background-color: #DEB887;
  
}

#container {
  /* consente di posizionare un elemento al centro del suo contenitore  */
  margin: 0 auto;
  overflow: hidden;
  width: 100%;  /* Imposto la larghezza */
}

#first{
  /*background-color: #8FBC8F;*/
  /* SFUMATURA BACKGROUND: */
  background-image: -ms-linear-gradient(top, #35F2EC 0%, #16B7D6 50%, #016D94 100%);
  background-image: -moz-linear-gradient(top, #35F2EC 0%, #16B7D6 50%, #016D94 100%);
  background-image: -o-linear-gradient(top, #35F2EC 0%, #16B7D6 50%, #016D94 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #35F2EC), color-stop(0.5, #16B7D6), color-stop(1, #016D94));
  background-image: -webkit-linear-gradient(top, #35F2EC 0%, #16B7D6 50%, #016D94 100%);
  background-image: linear-gradient(to bottom, #35F2EC 0%, #16B7D6 50%, #016D94 100%);

  width: 200px;
  min-height: 300px;
  border-radius: 10px;
  float: left;
  /*margin-right: 15px;*/
  margin-bottom: 20px;
  box-shadow: 6px 7px 15px rgba(0, 0, 0, 0.37);
    -moz-box-shadow: 6px 7px 15px rgba(0, 0, 0, 0.37);
    -webkit-box-shadow: 6px 7px 15px rgba(0, 0, 0, 0.37);
  
}

#second{
  background-color: #8FBC8F;
  width: 200px;
  min-height: 300px;
  border-radius: 10px;
  float: right;
  /*margin-left: 15px;*/
  margin-bottom: 20px;
  box-shadow: 6px 7px 15px rgba(0, 0, 0, 0.37);
    -moz-box-shadow: 6px 7px 15px rgba(0, 0, 0, 0.37);
    -webkit-box-shadow: 6px 7px 15px rgba(0, 0, 0, 0.37);
}

In pratica vi è un container #container centrato che al suo interno contiene: un header rappresentato dal div #header2 che stà su una lina sola al di sotto del quale vi sono due colonne #first e #second

Ora io voglio mettere le due colonne una sul lato sinistro (#first) del container e l'altra sul lato destro (#second) del container, per fare ciò ho impostato la proprietà float: left al div #first e la proprietà float: right al div #second

Non sò se sia una scelta corretta o intelligente o se ci siano modi migliori per fare la stessa cosa

Potrebbe dare problemi così?

Grazie mille
Andrea