Due colonne larghezza variabile la seconda vuota

mytom

Due colonne larghezza variabile la seconda vuota

Salve, ho un menu orizzontale composto da due sezioni di dimensione variabile: quella di sinistra contiene i link (impostati a larghezza fissa e con float left per affiancarsi), mentre quella di destra è vuota ma con il colore di sfondo impostato e che nelle intenzioni dovrebbe riempire lo spazio rimanente.
La sezione di sinistra mi serve variabile in quanto a seconda della pagina cambia il numero di link e lo sfondo deve rimanere trasparente.

come si può risolvere?

io ho fatto così:

#menu {float:left; width:100%}
#sinistra {border-left:10px; float:left}
#destra {float; left; margin: 0px; background-color:#CCCCCC;}
.link {float:left; width: 50px; display:block; background-color:#CCCCCC; margin-rigt:5px;}

putroppo senza ottenere l'effetto voluto, ossia il contenitore "destra" non mi riempie lo spazio restante.

Dove sbaglio?

mas245

Se è a larghezza variabile e rimane vuoto a cosa si adatta?

mytom

Allo spazio rimasto vuoto.

mas245

Non funziona così, la colonna si adatta a del testo o qualcos'altro non allo spazio rimasto vuoto.

mytom

Quindi è un problema irrisolvibile?

king7880

Ciao hai provato a mettere width:100% al div di destra?

mytom

Si, è la prima cosa che ho provato, senza successo.

digital00

Ci sono due errori ortografici:

#destra {float; left;

(punto e virgola al posto dei due punti)
e in .link:

margin-rigt:5px;}

Correggi e facci risapere.

EDIT: non capisco perchè vuoi usare quel quando puoi applicare il background all'intero menu, e se vuoi che #sinistra non erediti il colore basta impostare un altro background a quest'ultima. Forse se mi fai vedere un rendering grafico di questo menu posso darti una soluzione più precisa (prima correggi gli errori).

Ciao!

mytom

Gli errori li avevo già corretti.
In pratica ho bisogno di mostrare lo sfondo appartenente al contenitore principale al di sotto del margin-rigt:5px; (trasparente, appunto) di ogni link.
Pertanto #destra non può avere uno sfondo, mentre #sinistra deve apparire come un link allungato fino alla fine del contenitore.
Non so se ho reso l'idea.

digital00

Senti, sarà l'ora, o sarò scemo io, ma preferisco essere sincero, non lasciarti senza risposta, e dirti che c'ho capito poco :D. Soprattutto con

Pertanto #destra non può avere uno sfondo, mentre #sinistra deve apparire come un link (???) allungato fino alla fine del contenitore.

Scusa la mia tardezza di comprendonio. Se magari fai un immaginetta con la tua idea di menu e ce la linki risolviamo tutto. Con l'ultima frase e con "sfondo al di sotto del margin-right: 5px trasparente" mi hai un po scombussolato le idee. Sciao!

p.s. se non hai già fatto, correggi anche border-left: 10px
p.p.s se noti che sono io troppo tardo di comprendonio non stare nemmeno a fare l'immagine e aspetta qualche altra risposta

karedas

Ciao Mytom
Vediamo.
Se metti al div di destra una larghezza di 100% è ovvio che quel div pretenderà l'intera fascia orizzontale in relazione a chi a sua volta lo contiene. Nel tuo caso si andrebbe a posizionare sotto il div di sinistra poichè essendo di una certa dimensione impedirebbe la larghezza 100% a quello di destra.

Ciò che invece puoi fare sono due cose:
O dare una dimensione fissa anche al div di destra oppure usare le percentuali, esempio:
[html]
#sinistra{
width: 30%;
}
#destra{
width:70%
}
[/html]
Ovvio che non avrai più una dimensione basata sui pixel per il menù di sinistra. L'unica alternativa infatti è quella di utilizzare appunto i valori fissi per entrambi.

Per quanto riguarda l'altezza te la illustro successivamente in base alla tua risposta

ciao!

mytom

L'altezza dovrebbe essere apposto così. Per ora mi sono arrangiato con i valori fissi, e penso che così possa andare bene.
Grazie.

digital00

Grazie al link del pvt ho finalmente capito. Una soluzione è questa (testata su ie e ff):


#MainContainer {
  width: 100%;
  background-color: #CCCCCC;
  overflow: hidden;
}
#LinkContainer {
  float:left; 
  width: 50px;
  background: url(img/back.gif) repeat-x;
  overflow: hidden;
  padding-right: 5px;
}
.Link {  
  display: block; 
  background-color:; 
  text-align: center
}
<div id="MainContainer">
<div id="LinkContainer"><div class="Link">First</div></div>
<div id="LinkContainer"><div class="Link">Second</div></div>
</div>

Il risultato è quello che volevi: il copre il ruolo del tuo #destra; il mantiene "lo sfondo sotto il margin-right: 5px" . Applica l'immagine di background del tuo attuale menu a (magari imposta repeat-x, a seconda di come tagli l'immagine di back), e è fatta.

Ciao!
fammi sapere se hai problemi

mytom

grazie per i suggerimenti

digital00

Mi raccomando, se c'è qualcosa che non ti torna dimmelo. Testa il codice, ottieni il risultato che cercavi, basta modellarlo secondo le tue esigenze.

Ciao!