Div Float Centrare %

Salve a tutti, ho un piccolo problema.
Ho tre DIV allineati a sinistra FLOAT: LEFT
Devo centrarli, quindi creo un DIV contenitore dove inserisco i miei tre DIV.
Per centrare il contenitore uso la funziona MARGIN: 0 AUTO

Ora se i tre DIV hanno una WIDTH definita attribuisco al contenitore la stessa WIDTH e i tre DIV allineati a sinistra si centrano.

Vorrei che i miei tre DIV avessero, però, una WIDTH in %. Solo che provando col metodo che ho descritto prima non funziona...
Lascio il codice HTML e il CSS che ho utilizzato:

Codice HTML:

---

<div id="contenitore">
<div id="primo"></div>
<div id="secondo"></div>
<div id="terzo"></div>
</div>

---

Codice:

---

#contenitore {
  width: 100%;
  height: 200px;
  margin: 0 auto;
}

#primo {
  width: 30%;
  height: 200px;
  background: black;
  float: left;
}

#secondo {
  width: 30%;
  height: 200px;
  background: black;
  float: left;
  margin-left: 10px;
}

#terzo {
  width: 30%;
  height: 200px;
  background: black;
  float: left;
  margin-left: 10px;
}

---

Grazie in anticipo e buone feste.

Se controlli con gli strumenti per sviluppatori integrati nei moderni browser puoi notare che sono quei margini laterali che causano la visualizzazione dell'ultimo div sotto gli altri due. Puoi agire usando la proprietà CSS box-sizing (e convertendono i margini in padding) oppure aggiungendo elementi HTML d'appoggio in più.