CSS e div - 1 colonna larghezza fissa e l'altra che occupa lo spazio rimanente...

ops8086

CSS e div - 1 colonna larghezza fissa e l'altra che occupa lo spazio rimanente...

Ho un problemino con i div e i css. Sto creando un sito in xhtml, e avrei bisogno che in questo ci sia un header (alto 120pixel) fatto in questo modo:

a sinistra c'è un div (che contiene un logo, ma questo è trascurabile) di larghezza fissa (160px), e subito accanto, alla destra del logo ci deve essere un altro div che occupa tutta la larghezza rimanente (quindi se si resiza il browser deve prendere il 100% della larghezza del body MENO i 160px del div del logo). Dentro a questo div che prende lo spazio rimanente deve esserci un filmato flash (alto sempre 120px) che si allarga e si stringe alla stessa larghezza di questo secondo div (insomma..sempre come larghezza 100% del body MENO i 160px del logo).

Con le tabelle avrei fatto due td uno con larghezza 160px e l'altro avrei messo 100%...in questo modo si sarebbe automaticamente adattato.

Con i div e i css invece, se metto 100% come larghezza del secondo div succede che questo assume la larghezza dell'INTERO body, quindi esce dallo schermo ed appare di conseguenze la barra di scorrimento orizzontale (cosa che non voglio che succeda).

Come posso risolvere il problema ? ho provato di tutto....ad incapsulare il div dentro un div wrapper....con il padding, bordi, margini, ecc.... ma niente!

Per darvi un idea di cosa voglio fare date un occhiata a questo sito:

www.areakitchen.it

Quello che voglio fare è esattamente la stessa cosa che avviene sull'header di questo sito (logo fisso, header in flash con larghezza che occupa la parte restante...ma NON appare la scrollbar orizzontale....). Solo che quel sito usa le tabelle...e io invece voglio essere DIV-compatible e non usare più le tabelle

Pls help me

laburno

Ciao ops8086,
prova così:

[html]<div id="wrapper">
<div class="col160px"></div>
<div class="col100pc"></div>
</div>[/html]

#wrapper { width:100%; }
.col160px { width: 160px; }
.col100pc { width: 100%; margin-left: -160px; }

ops8086

@Laburno said:

Ciao ops8086,
prova così:

[html]<div id="wrapper">
<div class="col160px"></div>
<div class="col100pc"></div>
</div>[/html]
#wrapper { width:100%; }
.col160px { width: 160px; }
.col100pc { width: 100%; margin-left: -160px; }

Grazie mille alla fine ho risolto in questo modo:

Il div con la larghezza fissa l'ho messo float:left e con width: 160px, mentre il div con la larghezza variabile a seconda della dim. del browser l'ho fatto usando margin in questo modo:

margin: 0px 0px 160px 0px

e senza impostare width. Così il div si "espande" automaticamente per rispettare i margini indicati.

Non capisco ancora una cosa però:

per questi due div la cosa funziona nel modo che ho descritto, e nell'xhtml sono indicati in questo modo:

Più in basso nel codice ho anche questi due div:

che funzionano praticamente allo stesso modo dei primi due, usando lo stesso metodo che ho descritto (visto che left deve avere larghezza fissa, e content si deve invece adattare).

La cosa strana è però che mentre per header, impostando margin a 160px funzionava regolarmente, per content impostanto un certo margin è come se partisse a contare dalla fine della larghezza di left, e non dal bordo sinistro del browser, come per header. Eppure i due div sono impostati allo stesso modo dei primi due! .... E' come se i margini di header sono relativi al browser, mentre i margini di content sono relativi al div che sta prima di lui (left).

boh...

laburno

Se funziona va bene

@ops8086 said:

La cosa strana è però che mentre per header, impostando margin a 160px funzionava regolarmente, per content impostanto un certo margin è come se partisse a contare dalla fine della larghezza di left, e non dal bordo sinistro del browser, come per header. Eppure i due div sono impostati allo stesso modo dei primi due! .... E' come se i margini di header sono relativi al browser, mentre i margini di content sono relativi al div che sta prima di lui (left).

boh...

Prova a fare un reset iniziale di margini e padding. Poi ricordati che se flotti gli elementi, di usare un clear:both dopo per evitare sovrapposizioni.

terminator.web

ciao a tutti ...
io in pratica ho lo stesso problema solo che con 3 div.

ho due div con dimensioni fisse (uno bloccato in alto e uno bloccato in basso) e un div centrale che sta tra questi due div.
questo div centrale devo adattarlo in altezza in base allo spazio che ha a disposizione. come faccio? perchè seguedo questa discussione non sono riuscito a farlo.

(il div centrale non deve "sottoporsi" agli altri due div, ma deve solo occupare lo spazio rimanente)

grazie in anticipo ciao!!

nikopolidis

Penso che il problema si possa risolvere impostando nel div centrale le proprietà css:

margin-top: __px;
margin-bottom: __px;

dove __ sono le dimensioni dei div (superiore e inferiore).