Larghezza variabile dell'intera pagina

[Naitu]

Salve.
Premetto che non sono espertissimo dei css.
Io ho un layout con una colonna sinistra di dimensioni fisse ed un div in cui inserire delle tabelle.
Questi due sono figli di un div "wrap",a sua volta figlio di body.
Premesso che non voglio un overflow gestito tramite scrollbar nel caso in cui le tabelle superino in larghezza le dimensioni del div centrale,non riesco a far si che questo div si espanda a seconda della larghezza del contenuto.
In sostanza se il contenuto é troppo largo il BODY si allarga però il div wrap(e quello centrale) no pur avendoli dichiarati con width:inherit(ho provato anche width:auto).
Detto questo,la cosa strana é che questo problema si verifica con mozilla e non con IE(IE allarga correttamente anche il div wrap ed (il figlio) il div centrale).

In parole povere quello che vorrei ottenere é una colonna sinistra di dimensioni fisse ed un divisorio centrale che si allarga a seconda della larghezza del body(e quindi alla larghezza dle contenuto).

GRAZIE INFINITE!!!!

[indigoindigo]

Prova ad usare grandezze percentuali per il wrap (ma occhio che allora l'elemento parent deve avere una width anche lui)

ciao

[Naitu]

Grazie della risposta.
Questo é giusto,e pertanto dovrei definire una larghezza del body...
Ed é quello che ho fatto,infatti ora si vede come previsto.
Però non c'é un modo nei css di non dichiarare la dimensione degli elementi e dimensionare la larghezza a seconda dei contenuti?

Grazie!!!

[indigoindigo]

Questo che descrivi dovrebbe essere il comportamento naturale degli elementi..
ho riletto la domanda e l'ho capita meglio..potresti postare il codice CSS e html?

[Naitu]

body {
background:#f0f0f0 url(../img/bodybg.jpg) repeat-x;
color:#303030;
font:76% Verdana,Tahoma,Arial,sans-serif;
margin:0;
padding:0;
text-align:center;
width:auto !important;
}

a {
color:#505050;
font-weight:bold;
text-decoration:none;
}

font {
font-weight:bold;
text-decoration:none;
}
a:hover {
color:#808080;
text-decoration:underline;
}

p {
line-height:1.5em;
margin:0 0 15px;
}

/*** Main container - contenssitename, mainmenu,wrap***/

#container {
color:#303030;
margin:0;
padding:0;
text-align:left;
width:inherit !important;
min-height:800px;
/**For IE**/
height: auto !important;
height:800px;
min-height: 1px;
}

/*** Header section ***/

#sitename {
color:#ffffff;
height:92px;
margin:0 20px 10px;
text-align:left;
}

#sitename h1,#sitename h2 {
font-weight:400;
letter-spacing:-2px;
margin:0;
padding:0;
}

#sitename h1 {
font-size:2.4em;
padding-top:20px;
}

#sitename h2 {
font-size:1.6em;
}

/*** Horizontal menu ***/

#mainmenu {
float:left;
margin-bottom:25px;
}

#mainmenu ul {
font-size:16px;
margin:0;
padding:0;
}

#mainmenu li {
float:left;
height:35px;
list-style:none;
margin:0;
padding:0;
}

#mainmenu li.right {
float:right;
height:35px;
list-style:none;
margin:0;
padding:0;
}

#mainmenu a {
border-right:1px solid #b0b0b0;
color:#606060;
display:block;
font-size:0.7em;
padding:11px 10px 10px;
text-transform:uppercase;
}

#mainmenu a:hover {
background:#f0f0f0 url(../img/menuhover.jpg) top left repeat-x;
color:#505050;
text-decoration:none;
}

#mainmenu a.current {
background:#f0f0f0 url(../img/menuhover.jpg) top left repeat-x;
color:#505050;
text-decoration:none;
}

/*** Content wrap- into the div leftside,rightside(optional),content**/

#wrap {
clear:both;
font-size:0.9em;
padding:0;
height:auto;
width:1250px;
}

/*** Sidebars ***/

#leftside,#rightside {
margin:0;
width:auto;
min-height:600px;
/* Questo è il trucco per ingannare Explorer 5 */
voice-family: "\"}\"";
voice-family:inherit;
width:165px;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
/* Con questa dichiarazione risolviamo un bug di Opera 5 */
body#leftside {width:165px;}
body#rightside {width:165px;}

#leftside {
float:left;
margin-right:10px;
width:230px;
}

#rightside {
float:right;
margin-left:10px;
}

#leftside h1,#rightside h1 {
color:#505050;
font-size:1.6em;
font-weight:bold;
letter-spacing:-1px;
margin:0 0 12px;
}

#leftside h2,#rightside h2 {
font-size:1.1em;
margin:0 0 20px;
}

#leftside p,#rightside p {
font-size:0.9em;
line-height:1.4em;
margin:0 0 16px 10px;
}

.linklist {
list-style:none;
margin:0 0 16px 10px;
padding:0;
}

.linklist li {margin-bottom:0.7em;}

/*** Sidebar menu ***/

.nav {
background:#e8e9ea;
border:1px solid #b0b0b0;
color:#606060;
display:block;
margin-top:8px;
padding:5px 4px 4px 10px;
position:relative;
text-transform:uppercase;
width:125px;
height: 20px;
}

.nav2 {
background:#0a94c3;
border:1px solid #b0b0b0;
color:#ffffff;
display:block;
margin-top:8px;
padding:5px 4px 4px 10px;
position:relative;
text-transform:uppercase;
width:125px;
height: 20px;
}

.nav:hover,.active {
background:#f8f9fa;
border:1px solid #909090;
color:#303030;
text-decoration:none;
}

.sub {
font-size:0.8em;
letter-spacing:1px;
margin:3px 0 2px 10px;
padding:4px 2px 2px 8px;
width:125px;
}

.sub2 {
font-size:0.8em;
letter-spacing:1px;
margin:0px 0 0px 0px;
padding:0px 0px 0px 0px;
width:60px;
}

/***Last details ***/
#content,#contentalt {
margin:0px 20px 30px 20px;
border:0px;
color:#2a2a2a;
padding-top: 15px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 20px;
height:auto;
}


#content h1,#content h2,#contentalt h1,#contentalt h2 {
background-color:inherit;
color:#606060;
font-size:1.8em;
font-weight:bold;
letter-spacing:-1px;
margin:0 0 15px;
padding:0 0 0 0;
}

#content h2,#contentalt h2 {
font-size:1.6em;
margin-bottom:10px;
}

#content img,#contentalt img {
border:1px solid #b0b0b0;
float:left;
margin:5px 15px 6px;
padding:5px;
}

#contentgraphs {
margin:0px 200px 30px 250px;
background-color:#fafcff;
border:1px solid #909090;
color:#2a2a2a;
padding-top: 15px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 20px;
}


#gif{
width:25px;
height:25px;
border:none;
padding:0px 0px 0px 0px;
}

/*** Php data-into the content div ***/

#phpdata {
color:#2a2a2a;
width:99%;
overflow:visible;
}


/*** Footer ***/

#footer {
background:#8b8b8b url(../img/footerbg.jpg) top left repeat-x;
clear:both;
color:#d0d0d0;
font-size:0.9em;
font-weight:bold;
margin:0;
padding:20px 0;
text-align:center;
width:1250px;
}

#footer a {
color:#d0d0d0;
font-weight:bold;
}

[indigoindigo]

Se hai un link al sito sarebbe meglio, visto che è così lungo..comunque mi servirebbe anche l'html..

[Naitu]

Mi sono dimenticato di grassettare anche la largezza fissata nel wrap.
Come vedi il foglio é più cmplesso di come te l'avevo descritto ma il problema permane il solito: avere una larghzza dell'intera pagina che:

Se uno ha una risoluzione a 1280 la largezza é 1280(supponiamo che il contenuto non vada oltre i 1280:-)).
Se uno ha una risoluzione a 1024 ed il contenuto ci sta allora la larghezza della pagina é 1024(niente scroll).
Se uno ha una risoluzione a 1024 ed il contenuto non ci sta allora e solo allora compaiono gli scroll.

Grazie infinite di tutto!

[Naitu]

cbm.ntop.org

E' un sito che sto sviluppado per un progetto di monitoraggio remoto patrocinato dal RIPE.
ti creo un accounta temporaneo per accedere alle altre pagine al di fuori della login:-)

Gabriele

[indigoindigo]

Ora non ho il tempo di guardare tutto questo codice (e mi servirebbe anche l'html!!!!!!!!! )..
comunque in linea di massima stai chiedendo un layout fluido --> misure in percentuali..domani vediamo cosa caviamo vuori..o magari ti aiuto intanto qualcun altro!

ciao

-edit--

ok, non avevo visto il link..

[Naitu]

ti ho inviato user e pass in pvc(penso:-).

Grazie