Comportamento della proprietà width

[Nunkij]

Salve a tutti,
probabilmente è una domanda stupida ma mi sono reso conto che non ho mai risolto questo problema.

Se voglio fare un layoyt table-less imposto due div con la larghezza esplicità e l'attributo float:left.
Se però la larghezza in percentuale delle colonne in totale è 100% i div mi compaiono uno sotto l'altro. Come posso ovviare a questo problema?

Grazie a chi mi risponderà.

Il codice scritto è questo:

<div class='sectionToolBox'>
    <div class='sectionToolCol'>Colonna 1</div>                                            
    <div class='sectionToolCol'>Colonna 2</div>
</div>

.sectionToolBox{
    text-align:center;
    margin:30px auto;
    border:1px solid white;
    width:80%;
}

.sectionToolCol{
    width:50%;
    float:left;
}

[ac_socmel]

meglio se mostri una pagina, anche perchè mancano informazioni tipo:
os
browser
doctype

[Nunkij]

ese_1.jpg

Aggiungo uno stamp.
La situazione è questa su tutti i browser testati FF 27, CHROME 33, OPERA 19 E IE 9.

Se elimino il bordo il layout funziona e le colonne si dispongono una accanto all'altra.
Quindi la domanda è come far a mantenere le due colonne una accanto al'altra e impostare un bordo? Se uso le dimensioni fisse (in px) e metto la larghezza di ogni colonna di un valore X - 2* L (dove L è la larghezza del bordo) mi compaiono una accanto all'altra ma non sono perfettamente allineate con il div superiore (rientrano di 1-2 px).

Spero di essere stato più chiaro

[ac_socmel]

annida un altro div in ogni colonna e definisci il bordo per questo

[Nunkij]

Non funziona.

Altre idee?? Ma più che soluzioni vorrei capire perché fa così!

[ac_socmel]

Non funziona.

chissà come lo hai fatto, mostra un link non una foto

vorrei capire perché fa così!

semplice
la somma 50% + 50% + bordo + bordo
è evidentemente maggiore di 100%