[CSS] Aiuto posizionamento div

[Petro_suse91]

Ciao, non riesco a fare una cosa semplice semplice:

vorrei creare due div, affiancati e a larghezza fissa(210px).

Di questi due contenitori interni, il primo, quello di sinistra, è largo 300px; mentre al suo fianco, sulla destra, c'è il secondo, che occupa tutto il resto dello schermo.

Non dovrebbe essere complicato, ma non capisco dove sbaglio:

<div id="header1"></div>
<div id="header2"></div>

e nel css:
div#header1{float:left;width:400px;height:210px;background: url(header.png) no-repeat top left}
div#header2{width:100%;height:210px;background: url(header2.png) repeat-x top left}

Il risultato che vorrei ottenere è quello visualizzato con firefox. Perchè IE mette i due contenitori uno sotto l'altro?

[Kreatore]

bella domanda, mi è capitato spesso anche a me.... anzi continua a capitare: www.kreatore.it

comuque tra le varie soluzioni, una potrebbe essere questa:

<div id="header2">
 <div id="header1"></div>
</div>

e assegni al header 1 il float left!!

[Petro_suse91]

edit: così è perfetto! Grazie

però vorrei capire perchè... :master:

[deivnet]

Ma su che versione di IE ve lo dà?
Io ho provato sulla 6.0 e tutto funziona correttamente.

[Petro_suse91]

stessa versione.

Ti assicuro che il codice è quello che ho postato... e la soluzione quella di kreatore

[Petro_suse91]

Sorge un nuovo problema: ho messo un box che dovrebbe stare alla sinistra di header1, e in effetti con firefox ci sta:

<div id="header2">

<div id="header1">
<div id="servizi">


prova</p>

</div></div></div>

css:
div#header1{float:left;width:400px;height:210px;background: url(header.png) no-repeat top left}
div#header2{width:100%;height:210px;background: url(header2.png) repeat-x top left}

div#servizi{margin-left:450px;margin-top:100px;width:100%;}

con explorer, il div servizi è a posto, ma header2 se ne va tutto a destra (a una distanza arbitraria dal margine dx)
come mai?

[deivnet]

header2 dove deve stare?

[Petro_suse91]

la struttura sarebbe:

[ header 1 ] [ header 2 [ servizi ] ]
con header2 che è lì vuoto, solo x contenere lo sfondo.

codice e css sono poco sopra

header2 dovrebbe cominciare laddove header1 finisce, e con lui Servizi

[Petro_suse91]

ah no, scusate, ho risolto:
l'immagine di sfondo era troppo larga: IE prendeva la width dalla larghezza in pixel dell'img di background; FF la prendeva da quella specificata nel CSS, fregandosene della larghezza dell'img di background

non lo sapevo

[deivnet]

Stavolta sono io che non ho risolto il problema.
Ieri funzionava tutto oggi ripresa la stessa pagina non funziona più nulla.

Ho testato nuovamente la soluzione
con solo 2 div affiancati

<div id="header2"></div>
<div id="header1"></div>

Ho provato a fare come dici tu riducendo l'immagine di sfondo ma niente, il tutto funziona se metto la larghezza del secondo div in pixel adattandola allo schermo se la lascio al 100% mi va su due righe...è un vero dilemma...