Come posso sostituire il layout della pagina da tabelle a css?

[algatraz]

Ho intenzione di sostituire l'utilizzo delle tabelle per il layout della pagina con il box model del css.
Ho realizzato le classiche 9 celle che si utilizzavano con le tabelle, per inserire delle immagini di sfondo che componessero una cornice.
Nel link seguente trovate l'esempio.
http://www.algatrazz.it/prova/SITO_B..._file_base.php

Il problema è questo: mentre con le tabelle ero in grado di modificare la dimensione della cornice in base al contenuto e alla dimensione della finestra che visualizza la pagina, ora riesco solo per la proprieta "height" (se ridimensionate la finestra del browser vedete che la cornice si adegua), ma la dimensione "width" sono costretto ad assegnarla fissa, e se restringo la finestra mi incasina la cornice.
Mi chiedevo quali correzioni dovevo apportare, oppure se avete esempi di codice che utilizza le 9 celle ridimensionabili
Il codice è questo:
<div id="blocco">
<div id="alto_sx">
</div>
<div id="alto">
</div>
<div id="alto_dx">
</div>

<div id="floatstop">
</div>

<div id="lat_sx">
</div>
<div id="corpo_centrale">


testo testo testo testo testo testo testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo testo testo testo </p>
</div>
<div id="lat_dx">
</div>

<div id="floatstop">
</div>

<div id="basso_sx">
</div>
<div id="basso">
</div>
<div id="basso_dx">
</div>
</div>

il foglio di stile è questo:
#blocco
{
display: block;
background-image: url();
background-repeat: no-repeat;
width: 700px;
height: 500px;
position:absolute;top:50%;left:50%;
margin:-250px 0 0 -400px;
}


#alto_sx
{
float:left;
height: 11px;
width: 9px;
background-image: url(immagini/finestra/alto_sx.jpg);
background-repeat: no-repeat;
}

#alto
{
float:left;
height: 11px;
width: 600px;
background-image: url(immagini/finestra/alto.jpg);
background-repeat: repeat-x;
}

#alto_dx
{
float:left;
height: 11px;
width: 9px;
background-image: url(immagini/finestra/alto_dx.jpg);
background-repeat: no-repeat;
}

#lat_sx
{
float:left;
width: 9px;
height: 90%;
background-image: url(immagini/finestra/lat_sx.jpg);
background-repeat: repeat-y;
}

#corpo_centrale
{
float:left;
width: 600px;

overflow: auto;

}

#lat_dx
{
float:left;
width: 9px;
height:90%;
background-image: url(immagini/finestra/lat_dx.jpg);
background-repeat: repeat-y;
}

#basso_sx
{
float:left;
height: 11px;
width: 9px;
background-image: url(immagini/finestra/basso_sx.jpg);
background-repeat: no-repeat;
}

#basso
{
float:left;
height: 11px;
width: 600px;
background-image: url(immagini/finestra/basso.jpg);
background-repeat: repeat-x;
}

#basso_dx
{
float:left;
height: 11px;
width: 9px;
background-image: url(immagini/finestra/basso_dx.jpg);
background-repeat: no-repeat;
}

#floatstop
{
clear: both;
}

[digital00]

Beh l'unico modo è dare una width in percentuale ai div alto, corpo_centrale e basso.. In questo modo la tabella ti rimarrà sempre a quella percentuale, qualsiasi sia il ridimensionamento della finestra, ma almeno non si incasinano i float..

[salasir]

Potrebbe essere semplicemente un problema di azzerare e settare opportunamente i margini.