Ciao a tutti,
Sto scrivendo un CSS per un layout fluido tableless. Il problema è semplice, ma non ho trovato una soluzione "adeguata".
Ho un container principale che ha dimensione del 70% (min-width: 760px). L'header è composto da due blocchi: a sinistra uno contiene un'animazione flash e deve essere sempre e solo 500 px. A destra vi è un div con del testo. La sua larghezza deve riempire completamente lo spazio restante (sempre all'interno del 70% del container principale). Ciò significa che il div di testo deve avere una larghezza variabile pari al 70% - 500px.
Non so se mi sono spiegato bene.
Ecco il codice HTML:
codice:
<div class="container">
<div class="header">
<div class="border" id="flashobj">
<object> [...] </object>
</div>
<div class="border" id="topdx"> prova prova prova</div>
</div>
</div>
Ed ecco il CSS:
codice:
div.container{
width:70%;
min-width:760px:
margin:0 auto;
background:#fff;
}
div.header {
width:100%;
height:192px;
position:relative;
}
div.border {
border: 2px solid #E0E8F1;
padding: 2px;
}
div#flashobj {
float:left;
height: 182px;
width:500px;
background: url(../images/head.jpg) top left no-repeat;
}
div#topdx {
float:right;
width: ????;
}
Con IE funziona se uso:
width:expression(70*document.body.clientWidth/100 - 500 +"px") cioè 70% della larghezza del browser (che è la larghezza percentuale del mio layout fluido) - 500pixel del div con il flash...
Non mi piace nè funziona con firefox.
Help vi prego, ormai comincio a dare i numeri... anzi i div...