Problema layout responsive

[bagi]

Dopo aver letto la guida relativa al responsive sto provando a sviluppare un sito per testare le mie conoscenze.

Ho però subito riscontrato un problema, provo a spiegarmi. La struttura della pagina è questa:

<div style='width:94%; margin:0 auto'>
  <div style='width:5em; float:left font-size:5em'>/*Qui ho un carattere*/</div>
  <div style='float:left'>/*Qui ho una stringa di dimensioni non nota*/</div>
</div>

Mi piacerebbe che il secondo div (quello con la stringa non nota) si occupasse il resto dello spazio e che il suo testo fosse centrato rispetto a tutta la pagina (o almeno rispetto alla sua dimensione), ma non riesco ad ottenere questo effetto.

Ho provato sia con il margin:0 auto; che con il posizionamento assoluto.

Sapete aiutarmi?

[Prill]

puoi far flottare anche solo il primo div, il secondo risalirà da sé pur senza float (ma dovrà avere un margine sinistro pari alla larghezza del primo div).
E sul secondo div avrai un text-align:center; che centrerà il testo.
Se il testo dovrà apparire invece centrato rispetto alla pagina e non solo al suo contenitore, occorrerà assegnare al secondo div anche un margine destro (eguale al sinistro).

Il problema che si pone è però relativo alle dimensioni del div sinistro, poiché usi una larghezza in em la larghezza stessa del div è influenzata dalle dimensioni del carattere (infatti se le riduci vedrai che il div si restringe) e risulta abbastanza largo (400px dati dalle dimensioni di default del carattere 16 moltiplicate per 5 e poi di nuovo per 5), forse eccessivo (se poi consideri che devi avere pure un margine a destra...)

ti metto qui il codice

<div style="width:94%; margin:0 auto;">
  <div style="float:left;width:5em;font-size:5em; ">questo div è largo 400px dove l'impost. del carattere del browser è 16px (16x5x5)</div>
  <div style="margin-left:25em; text-align:center; height:200px; background-color:#00CC33;">
   <p>se il contenuto deve essere centrato rispetto</p>
   <p> alla pagina sarà necessario
    anche un margine destro di 25em</p>
  </div>

ho dato un colore al div e un'altezza solo per visualizzarlo meglio

puoi leggere questo che potrà rendere più chiaro quanto ho scritto http://www.w3conversions.com/sandbox...size_divs.html

[bagi]

Grazie mille!! Non sono abituato a non potere usare un px, mi sembra di essere tornato all'inizio.

Ero convinto che in html5/css3 il text-align fosse stato deprecato ;-)