div 100% - 200px

[fenderstr]

Salve
avrei bisogno di una mano:
ho un div con questa formattazione:

position:absolute; bottom:0px; left:300px; height:100px; width:100%; background-image:url(img/barrasotto.png); border-top:1px solid #FFF; border-left:1px solid #fff

quindi è un div che sta a piè di pagina con una larghezza 100%, ma spostato a destra di 300px

il problema che il css calcola il 100% di tutta la pagina + i 300px, quindi appare la barra di scorrimento.

esiste un metodo per togliere alla larghezza 100% questi 300px in modo che tutto rientri perfettamente nella pagina?

grazie

[Experiment8]

Ciao,

A mio parere no, ma puoi inserire un secondo div all'interno del div in position:absolute; senza dargli strani posizionamenti, dando a quest'ultimo il margine di 300px in modo che si adatti di conseguenza allo spazio che gli rimane.

Così dovrebbe funzionare

[fcaldera]

se ti interessano i soli browser moderni puoi scrivere

width: -webkit-calc(100% - 300px);
width: -moz-calc(100% - 300px);
width: calc(100% - 300px);

oppure puoi impostare il box-sizing a border-box (così da includere il calcolo padding all'interno della larghezza) e impostare un padding destro

padding-right: 300px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

[ldetomi]

Buona la proposta qui sopra, che però è limitata, come ti ha detto l'autore, ai browser più moderni, essendo proprietà CSS3.

In alternativa, devi farti 2 div innestati. Quello esterno è largo come la pagina, e funge solo da contenitore, quello interno ha un margin-left:300px

[fenderstr]

grazie per le risposte,
purtroppo non posso usare metodi che funzionano solo con i browser recenti, ancora ci sono persone che usano windows xp con explorer 8 o addirittura 7.

provo con il metodo classico usando un insieme di DIV.

[fcaldera]

Originariamente inviato da fenderstr
grazie per le risposte,
purtroppo non posso usare metodi che funzionano solo con i browser recenti, ancora ci sono persone che usano windows xp con explorer 8 o addirittura 7.

provo con il metodo classico usando un insieme di DIV.

La seconda soluzione che ti ho proposto funziona da IE8 compreso in su.

IE7 ha un utilizzo inferiore allo 0,5% attualmente. Si può tranquillamente ignorare.