Definizione larghezza colonna

[gaetanoTwins]

Salve ragazzi, non sono un vero esperto di css, ma spesso trovando un template che utilizzi i css riesco a modificarlo a mio piacimento;
questa volta però sono rimasto bloccato su una cosa:
la mia pagina ha praticamente due colonne: una a sinistra per il menu verticale e una laterale destra dove c'è la pagina "principale".
Le larghezze delle due colonne sono definite in percentuali;
Poichè per la colonna sinistra voglio che nn si restringa mai, o meglio che abbia sempre la stessa larghezza ho provato a definirla in px ... adesso mi chiedo come faccio a capire la larghezza della colonna destra in px affinche si prenda tutta la larghezza disponibile del browser?

Spero di essere stato chiaro, in attesa di un vostro riscontro porgo distinti saluti.

[gaetanoTwins]

Ragazzi il problema è che quando restringo la pagina del browser la colonna destra si sovrappone a quella di sinistra, per questo vi chiedevo di voler bloccare la larghezza della colonna sinistra.

Grazie

[copsteve]

La colonna di sinistra, se vuoi che non ri restringa mai, è giusto dimensionarla in px... quella di destra invece devi dimensionarla in % se vuoi che copra tutta l'area orizzontale dello schermo perchè non saprai mai con che risoluzione i tuoi utenti visualizzeranno il sito.

Per i problemi che hai espresso qui sopra forse è meglio che posti il codice...

[gaetanoTwins]

Ho fatto cosi come hai detto tu: ho impostato in px la colonna sinistra e in 100% quella di destra ... il risultato è che la colonna di destra si trova in fondo alla pagina e occupa tutta la larghezza della pagina del browser.

Grazie ancora ragazzi.

[copsteve]

Originariamente inviato da copsteve
Per i problemi che hai espresso qui sopra forse è meglio che posti il codice...

...forse è meglio che posti il codice ...

[gaetanoTwins]

/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.2.2
*/
/* for all templates and grids */
body{text-align:center;}
#ft{clear:both;}
/**/
/* 750 centered, and backward compatibility */
#doc,#doc2,#doc3,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7 {
margin:auto;text-align:left;
width:57.69em;*width:56.3em;min-width:100%;}
/* 950 centered */
#doc2 {
width:73.074em;*width:71.313em;min-width:950px;}
/* 100% with 10px viewport side matting */
#doc3 {
margin:auto 10px; /* not for structure, but so content doesn't bleed to edge */
width:auto;}

/* below required for all fluid grids; adjust widths and margins above accordingly */

/* to preserve source-order independence for Gecko */
.yui-b{position:relative;}
.yui-b{_position:static;} /* for IE < 7 */
#yui-main .yui-b{position:static;}

#yui-main {width:100%;}
.yui-t1 #yui-main,
.yui-t2 #yui-main,
.yui-t3 #yui-main{float:right;margin-left:-25em;/* IE: preserve layout at narrow widths */}

.yui-t4 #yui-main,
.yui-t5 #yui-main,
.yui-t6 #yui-main{float:left;margin-right:-25em;/* IE: preserve layout at narrow widths */}

.yui-t1 .yui-b {
float:left;
width:12.3207em;*width:12.0106em;}
.yui-t1 #yui-main .yui-b{
margin-left:13.3207em;*margin-left:13.0106em;
}

.yui-t2 .yui-b {
float:left;
width:13.8456em;*width:13.512em;}
.yui-t2 #yui-main .yui-b {
margin-left:14.8456em;*margin-left:14.512em;
}

.yui-t3 .yui-b {
float:left;
width:23.0759em;*width:22.52em;}
.yui-t3 #yui-main .yui-b {
margin-left:24.0759em;*margin-left:23.52em;
}

.yui-t4 .yui-b {
float:right;
width:13.8456em;*width:13.512em;}
.yui-t4 #yui-main .yui-b {
margin-right:14.8456em;*margin-right:14.512em;
}

.yui-t5 .yui-b {
float:right;
width:18.4608em;*width:18.016em;}
.yui-t5 #yui-main .yui-b {
margin-right:19.4608em;*margin-right:19.016em;
}

.yui-t6 .yui-b {
float:right;
width:23.0759em;*width:22.52em;}
.yui-t6 #yui-main .yui-b {
margin-right:24.0759em;*margin-right:23.52em;
}

.yui-t7 #yui-main .yui-b {
display:block;margin:0 0 0 0;
}
#yui-main .yui-b {float:none;width:auto;}
/* GRIDS (not TEMPLATES) */
.yui-g .yui-u,
.yui-g .yui-g,
.yui-gc .yui-u,
.yui-gc .yui-g .yui-u,
.yui-ge .yui-u,
.yui-gf .yui-u{float:right;display:inline;}
.yui-g div.first,
.yui-gc div.first,
.yui-gc div.first div.first,
.yui-gd div.first,
.yui-ge div.first,
.yui-gf div.first{float:left;}
.yui-g .yui-u,
.yui-g .yui-g{width:49.1%;}
.yui-g .yui-g .yui-u,
.yui-gc .yui-g .yui-u {width:48.1%;}
.yui-gb .yui-u,
.yui-gc .yui-u,
.yui-gd .yui-u{float:left;margin-left:2%;*margin-left:0%;width:100%;} /*larghezza del blocco laterale destro*/
.yui-gb div.first,
.yui-gc div.first,
.yui-gd div.first{margin-left:0;}
.yui-gc div.first,
.yui-gd .yui-u{width:348px; } /*larghezza del blocco laterale sinistro*/
.yui-gd div.first{width:32%;}
.yui-ge .yui-u{width:24%;}
.yui-ge div.first,
.yui-gf .yui-u{width:74.2%;}
.yui-gf div.first{width:24%;}
.yui-ge div.first{width:74.2%;}
#bd:after,
.yui-g:after,
.yui-gb:after,
.yui-gc:after,
.yui-gd:after,
.yui-ge:after,
.yui-gf:after{content:".";display:block;height:0;clear: both;visibility:hidden;}
#bd,
.yui-g,
.yui-gb,
.yui-gc,
.yui-gd,
.yui-ge,
.yui-gf{zoom:1;}


/* Basic Element Formatting */

#header{
height:100px;
background: transparent url(sfondoAzzurro.jpg) ;
margin:0;
padding:0;
text-align: center;
}

#header h1{
font-size:1em;
margin:0;
background: transparent url(sfondoAzzurro.jpg) ;
padding:10px;
}

#header h1 a{
color:#000000;
background: transparent url(sfondoAzzurro.jpg) ;
background-color:#F3F2ED;
}

.content{
height:950px;
background: transparent url(sfondoAzzurro.jpg) ;
margin:0;
padding:0;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.5em;
}
.content3{
height:950px;
background: transparent url(sfondoAzzurro.jpg) ;
margin:0;
padding:0;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.5em;
}

.content2{
height:950px;
background: transparent url(sfondoLateraleSinistro.jpg) ;
margin:0;
display:block;
padding:0;
}
#secondary{
height:300px;
background:#F6F0E0;
border-top:#FFFFFF 2px solid;
margin:0;
padding:0;
}

#secondaryFull{
height:50px;
background-color:#CFB59F;
border-top:#FFFFFF 2px solid;
margin:0;
padding:0;
}

#footer{
height:50px;
background: transparent url(sfondoAzzurro.jpg) ;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: .8em;
margin:0;
padding:0;
}

[gaetanoTwins]

Ragazzi dal codice che ho postato riuscite a darmi una spiegazione?

[copsteve]

Inserisci anche il codice HTML altrimenti è un pò difficile capire.

[gaetanoTwins]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>xxxxxxx</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<link rel="stylesheet" type="text/css" href="styles.css" >
</head>
<body>
<div id="doc" class="yui-t7">
<div id="hd">
<div id="header"><h1>[img]titolo.jpg[/img]</h1></div>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gc">
<div class="yui-u first">
<div class="content2">[img]sfondoLateraleSinistro.jpg[/img]</div>
</div>
<div class="yui-u">
<div class="content">

[img]construction.png[/img]
Sito in allestimento, a breve inseriremo una galleria ricca di articoli.



xxxxxxxxxxxxxxx





Dove siamo

[img]DoveSi1.gif[/img]





Contattaci

Indirizzo e.mail: xxxxxxx
</div>
</div>
</div>
</div>
</div>

</div>
<div id="ft">
<div id="footer">Copyright © 2007</div>
</div>
</div>
</body>
</html>

[gaetanoTwins]

Ragazzi mi avevate chiesto il codice html ... l'ho postato, nn mi sapete dire niente?

Grazie ancora