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

[giggi1991]

Ti basta settare float: left; ad entrambi i div cosi si posizioneranno uno affianco all'altro. Per il width puoi usare le percentuali dando 50% sia ad uno che all'altro div.
p.s. anche impostando float:left ad uno e float:right all'altro ottieni lo stesso risultato poichè non vi è spazio tra l'uno e l'altro div quindi visivamente non cambia nulla.

[AndreaNobili]

Originariamente inviato da giggi1991
Ti basta settare float: left; ad entrambi i div cosi si posizioneranno uno affianco all'altro. Per il width puoi usare le percentuali dando 50% sia ad uno che all'altro div.
p.s. anche impostando float:left ad uno e float:right all'altro ottieni lo stesso risultato poichè non vi è spazio tra l'uno e l'altro div quindi visivamente non cambia nulla.

Quindi in pratica mi stai dicendo che se ad esempio dessi:

float: left e width: 40% al div #first e poi float: left e width: 40% al div #second il risultato sarebbe avere #first a sinistra, #second a destra di #first ed il 20% di spazio vuoto tra #first e #second?

O ho capito male?

Tnx

[giggi1991]

Se dai ad entrambi il float:left essi si posizioneranno uno affianco all'altro, il 20% di spazio vuoto lo avrai sul lato destro del secondo div.
Se invece posizioni il primo con float:left e il secondo con float:right allora lo spazio vuoto del 20% si formerà tra i due div.
Nel caso invece in cui non ci sia spazio vuoto e quindi i due div avessero entrambi dimensione 50% non ci sarebbe nessuno spazio vuoto, indipendemente dal float che assegni.

[AndreaNobili]

Originariamente inviato da giggi1991
Se dai ad entrambi il float:left essi si posizioneranno uno affianco all'altro, il 20% di spazio vuoto lo avrai sul lato destro del secondo div.
Se invece posizioni il primo con float:left e il secondo con float:right allora lo spazio vuoto del 20% si formerà tra i due div.
Nel caso invece in cui non ci sia spazio vuoto e quindi i due div avessero entrambi dimensione 50% non ci sarebbe nessuno spazio vuoto, indipendemente dal float che assegni.

si stò vedendo praticamente...mi pare che potrei anche mettere float: left ad entrambi, entrambi con width: 40% e poi settare su #first un margin-right: 20%

Pare funzionare bene e lascia il famoso 20% di spazio centrale...

[giggi1991]

si si dovrebbe funzionare correttamente