Posizionare tre div affiancati?

[Peter_Pan]

Salve, sto da poco imparando ad usare il posizionamento dei div, lo scopo è quello di creare un leayout senza tabelle, devo creare la classica testatina, primo div con il logo, secondo div con un backfround per scriverci dentro, terzo div con finale del layout, vi posto un'immagine e del codice, mi potete dire perchè non riesco a posizionarli uno affianco all'altro???

DIV#Testatina_inizio {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    FLOAT: left;
    PADDING-BOTTOM: 0px;
    WIDTH: 205px;
    PADDING-TOP: 0px;
    border: solid 1px #000000;
}

DIV#Testatina_fine {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    FLOAT: right;
    PADDING-BOTTOM: 0px;
    WIDTH: 100px;
    PADDING-TOP: 0px;
    border: solid 1px #000000;
    width: 11px;
}

DIV#Testatina_Centro {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: -5px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px 205px 0px 11px;
    width: 500px;
    height: 67px;
    PADDING-TOP: 0px;
    border: solid 1px #000000;
} 

quando in testatina width vado a mettre la una dimensione superiore a 500 il box centrale va a capo??

[Peter_Pan]

il problema capita con IE, su firefox, invece, riesco a vederlo correttamente....

[Peter_Pan]

up...Help me!!

[Vincent.Zeno]

Non conoscendo il contesto non so dirti perché "testatina" non so cosa va a capo,
di solito sono le dimensioni totali che superano quelle del contenitore.

questo può aiutarti?

 css 
#uno {width: 150px; background-color: red;}
#due {width: 200px; background-color: yellow;}
#tre {width: 250px; background-color: green;}
.inline{ height: 100px; border: 1px solid red; float: left}

html 
<div id="uno" class="inline"></div>
<div id="due" class="inline"></div>
<div id="tre" class="inline"></div>

[calamus]

Originariamente inviato da Peter_Pan
il problema capita con IE, su firefox, invece, riesco a vederlo correttamente....

probabilmente è la larghezza dei moduli.
Nel tuo caso probabilmente è il bordo da 1px che IE interpreta in modo diverso da firefox.
mi spiego IE calcola la larghezza in x+1+1 dove x è la tua larghezza e 1+1 sono i bordi di dx e sinistra.

Per firefox la larghezza è quella indicata nel parametro with e i bordi li fa rientrare in quella misura.

La soluzione può essere l'iso del parametro !important:

width: 100px !important;
width: 98px;

Così facendo IE legge 100px e subito dopo 98px, firefox interpreta correttamente il parametro !important e ignora la seconda definizione.

ciao
Piero

[Peter_Pan]

Grazie ad entrambi.. i bordi servivano solo come indicazione, funziona correttamente.